CSS定位涉及固定宽度和剩余空间(CSS positioning involving a fixed width and the remaining space)

CSS定位涉及固定宽度和剩余空间(CSS positioning involving a fixed width and the remaining space)

我有一个宽度为100％的容器，包含2个div，第一个有固定宽度50px，第二个需要占用所有剩余空间（如果我给它宽度：100％它会明显下降）

这是一个示例简化标记：

<div style="width: 100%;height: 50%; border:1px solid black;"> <div style="width: 50px; border: 1px solid green;height: 100%;box-sizing: border-box;"></div> <div style="width: auto; border: 1px solid red;height: 100%;box-sizing: border-box;"></div> </div>

当然我不想在窗口调整大小事件上使用任何使用javascript或事件处理程序的解决方案

I have a container with a width of 100% that contains 2 div, the first 1 has a fixed width of 50px and the second one needs to occupy all the remaining space (if I give it width: 100% it will obviously fall)

Here's a sample simplified markup:

<div style="width: 100%;height: 50%; border:1px solid black;"> <div style="width: 50px; border: 1px solid green;height: 100%;box-sizing: border-box;"></div> <div style="width: auto; border: 1px solid red;height: 100%;box-sizing: border-box;"></div> </div>

Of course I don't want any solutions that use javascript or event handlers on the window resize event

最满意答案

解决方案1

在第一个子div上设置float:left;

在第二个子集上： overflow:hidden （或auto）。 这会触发块格式化上下文 - 这会导致第二个div填充剩余的水平宽度。

小提琴

.container { width: 100%;height: 50%; border:1px solid black; height: 100px; } .left { width: 50px; border: 1px solid green;height: 100%;box-sizing: border-box; float:left; } .right { width: auto; border: 1px solid red;height: 100%;box-sizing: border-box; overflow: hidden; }

这种方法的一个重要优点是它是跨浏览器的。 （不需要css3）

解决方案2

在第一个子div上设置position:absolute并在第二个子div上设置： padding-left:50px - 利用box-sizing属性将该padding放在框中。

小提琴

.container { width: 100%;height: 50%; border:1px solid black; height: 100px; position: relative; } .left { width: 50px; border: 1px solid green;height: 100%;box-sizing: border-box; position:absolute; top:0; left:0; } .right { border: 1px solid red; width: 100%; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 50px; }

Solution 1

On the first child div set float:left;

on the second child set: overflow:hidden (or auto). This triggers a block formatting context - which causes the second div to fill the remaining horizontal width.

FIDDLE

.container { width: 100%;height: 50%; border:1px solid black; height: 100px; } .left { width: 50px; border: 1px solid green;height: 100%;box-sizing: border-box; float:left; } .right { width: auto; border: 1px solid red;height: 100%;box-sizing: border-box; overflow: hidden; }

One important advantage with this method is that it is cross-browser. (no css3 needed)

Solution 2

Set position:absolute on the first child div and set on the second child div: padding-left:50px - making use of box-sizing property to place that padding within the box.

FIDDLE

.container { width: 100%;height: 50%; border:1px solid black; height: 100px; position: relative; } .left { width: 50px; border: 1px solid green;height: 100%;box-sizing: border-box; position:absolute; top:0; left:0; } .right { border: 1px solid red; width: 100%; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 50px; }