Javascript CSS HTML - DIV 高度填充剩余空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5059021/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS HTML - DIV height fill remaining space
提问by Andy Hin
So I have a layout like this:
所以我有一个这样的布局：
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 and col_2 take up a fixed amount of space. I want the third column to take up the rest of it. What is the best way to do accomplish this?
col_1 和 col_2 占用固定的空间量。我希望第三列占据它的其余部分。实现这一目标的最佳方法是什么？
回答by FMM
You could do something crazy, abandon the javascript and the not-quite-ready-for-prime-time CSS3 stuff and use absolute positioning.
你可以做一些疯狂的事情，放弃 javascript 和不完全准备好的 CSS3 东西并使用绝对定位。
See this jsfiddle. Bonus points for behaving well through browser resizes, too.
看到这个 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>回答by Hussein
Javascript is needed for this. If you want all 3 divs to fill up the window space (100%), then you we need to use javascript to detect how much space is left and assign the height of col_3 accordingly. With jQuery you can do
为此需要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);
回答by selbie
You've already accepted an answer, but you could check out CSS Flexbox, which is designed to solve this exact problem without relying on "float:left" hacks. It works on Chrome, Safari, and FF (with -webkit and -moz prefixes). Not on IE yet.
您已经接受了一个答案，但您可以查看 CSS Flexbox，它旨在解决这个确切的问题，而无需依赖“float:left”技巧。它适用于 Chrome、Safari 和 FF（带有 -webkit 和 -moz 前缀）。还没有在 IE 上。
Here's some quick links:
以下是一些快速链接：
http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm
http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm
回答by rikkertkoppes
You need a block formatting context:
您需要一个块格式上下文：
#c1,#c2 {
background-color: red;
float: left;
width: 200px;
}
#c2 {
background-color: green;
}
#c3 {
background-color: yellow;
height: 40px;
overflow: auto;
}
it is the overflow that makes it work. More info: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
是溢出使它起作用。更多信息：http: //www.w3.org/TR/CSS2/visuren.html#block-formatting
回答by INSURRECTION1ST
Here is somthing i thought about using some CSS only. i've tested it in FF12, GC18, SAF5.1 & IE 7,8,9,9CV.
这是我想过只使用一些 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回答by Ruslan López
If you target the most recent browsers you can use the HTML5 calcfunction
如果您的目标是最新的浏览器，则可以使用 HTML5calc功能
#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>回答by vincicat
Either using jQuery to calculate the remaining space, or use the css3 flexible box to fill up the remaining space:
要么使用jQuery计算剩余空间，要么使用css3弹性框填充剩余空间：
http://www.html5rocks.com/tutorials/flexbox/quick/
http://www.html5rocks.com/tutorials/flexbox/quick/
diagram2 is the case you want - the last box with maximum 'box-flex' will take the remaining space (default box-flex is 0)
图 2 是您想要的情况 - 具有最大 'box-flex' 的最后一个框将占用剩余空间（默认 box-flex 为 0）
回答by changokun
take off the width, and it should expand to fill everything. put width:100% if you'd like. you should check out the firebug plugin for firefox.
去掉宽度，它应该扩展以填充所有内容。如果您愿意，可以放置宽度：100%。你应该查看firefox的firebug插件。
回答by Tiny Giant Studios
Put all three div's in a container, give col 1 and 2 fixed widths and set the 3rd to auto.
将所有三个 div 放在一个容器中，给 col 1 和 2 固定宽度并将第三个设置为 auto。
