我有一个宽度为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; }更多推荐
width,px,<div,电脑培训,计算机培训,IT培训"/> <meta name="description&
发布评论