CSS HTML - DIV高度填充剩余空间

Question

所以我有这样的布局：

 div { border: 1px solid } 

 <div id="col_1" style="float:left;width:150px;">1</div> <div id="col_2" style="float:left;width:100px;">2</div> <div id="col_3" style="float:left;width:<REMAINING_WIDTH>;">3</div> 

col_1和col_2占用固定的空间。 我希望第三列能够占用其余部分。 完成此任务的最佳方法是什么？

Answer 1

你可以做一些疯狂的事情，抛弃javascript和非常准备好的黄金时段CSS3并使用绝对定位。

看到这个jsfiddle 。 通过浏览器调整大小的好处也可以获得奖励积分。

 #col_1 { position: absolute; top: 0px; bottom: 0px; width: 100px; background-color: #eee; } #col_2 { position: absolute; top: 0px; bottom: 0px; width: 150px; left: 100px; background-color: #ccd; } #col_3 { position: absolute; top: 0px; bottom: 0px; left: 250px; right: 0px; background-color: #cdc; } 

 <div id='col_1'>Column 1</div> <div id='col_2'>Column 2</div> <div id='col_3'> Column 3 </div> 

Answer 2

这需要Javascript。 如果你想要所有3个div填满窗口空间（100％），那么我们需要使用javascript来检测剩余的空间并相应地指定col_3的高度。 使用jQuery，你可以做到

var one = $('#col_1').height(),
two = $('#col_2').height(), 
remaining_height = parseInt($(window).height() - one - two); 
$('#col_3').height(remaining_height); 

Answer 3

你已经接受了答案，但你可以查看CSS Flexbox，它旨在解决这个问题，而不依赖于“float：left”黑客攻击。 它适用于Chrome，Safari和FF（带有-webkit和-moz前缀）。 尚未在IE上。

这是一些快速链接：

http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm

http://www.w3.org/TR/css3-flexbox/

Answer 4

这是我想过只使用一些CSS的东西。 我已经在FF12，GC18，SAF5.1和IE 7,8,9,9CV中进行了测试。

 .Clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .Clearfix { display: inline-block; } html[xmlns] .Clearfix { display: block; } * html .Clearfix { height: 1%; } #Wrapper { background-color: #FC20C9; } #col_1 { float: left; width: 150px; background-color: #FF0000; } #col_2 { float: left; width: 100px; background-color: #00CC00; } #col_3 { width: auto; float: none; background-color: #0066FF; overflow: hidden; } 

 <div id="Wrapper" class="Clearfix"> <div id="col_1">Lorem ipsum</div> <div id="col_2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div id="col_3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </div> enter code here 

Answer 5

您需要一个块格式化上下文：

#c1,#c2 {
    background-color: red;
    float: left;
    width: 200px;
}
#c2 {
    background-color: green;
}
#c3 {
    background-color: yellow;
    height: 40px;
    overflow: auto;
}

它是溢出使它工作。 更多信息： http ： //www.w3.org/TR/CSS2/visuren.html#block-formatting

Answer 6

如果您定位最新的浏览器，则可以使用HTML5 calc函数

 #col_3 { width: calc(100%-(100px+150px)); } #red { border: 1px solid goldenrod; } div { border: 1px solid; } 

 <div id="red"> <div id="col_1" style="width:150px; float:left;">1</div> <div id="col_2" style="width:100px; float:left;">2</div> <div id="col_3">3</div> </div> 

Answer 7

使用jQuery计算剩余空间，或使用css3 flexible框填充剩余空间：

http://www.html5rocks.com/tutorials/flexbox/quick/

图2是你想要的情况 - 最后'box-flex'的最后一个框将占用剩余空间（默认box-flex为0）

Answer 8

取下宽度，它应该扩展以填充一切。 放宽度：100％如果你愿意的话。 你应该查看firefox的firebug插件。

Answer 9

将所有三个div放在一个容器中，给col 1和2固定宽度，并将3rd设置为auto。