Html 如何填充 100% 的剩余高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15376558/
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
How to fill 100% of remaining height?
提问by Bhojendra Rauniyar
+--------------------+
| |
| |
| |
| |
| 1 |
| |
| |
| |
| |
+--------------------+
| |
| |
| |
| |
| 2 |
| |
| |
| |
| |
+--------------------+
Contents of (1) as shown above are unknown, as it may increase or decrease in dynamically generated pages. The second div (2) as shown above, should fill the remaining space.
上图（1）的内容是未知的，因为它可能会在动态生成的页面中增加或减少。如上所示，第二个 div (2) 应填充剩余空间。
here is an example of my html
这是我的 html 的一个例子
<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>
</div>
css...
css...
#full{width: 300px; background-color: red;}
#someid{height: 100%;}
Or is this method wrong? How should I do this? please see my demoand show me my mistake.
还是这个方法有问题？我该怎么做？请看我的演示并告诉我我的错误。
采纳答案by thgaskell
You should be able to do this if you add in a div (#headerbelow) to wrap your contents of 1.
如果您添加一个 div（#header下面）来包装 1 的内容，您应该能够做到这一点。
If you float
#header, the content from#someidwill be forced to flow around it.Next, you set
#header's width to 100%. This will make it expand to fill the width of the containing div,#full. This will effectively push all of#someid's content below#headersince there is no room to flow around the sides anymore.Finally, set
#someid's height to 100%, this will make it the same height as#full.
如果你 float
#header，内容 from#someid将被迫在它周围流动。接下来，您将
#header的宽度设置为 100%。这将使它扩展以填充包含 div, 的宽度#full。这将有效地将所有#someid内容推#header送到下方，因为没有空间再围绕两侧流动。最后，将
#someid的高度设置为 100%，这将使其与 高度相同#full。
HTML
HTML
<div id="full">
<div id="header">Contents of 1</div>
<div id="someid">Contents of 2</div>
</div>
CSS
CSS
html, body, #full, #someid {
height: 100%;
}
#header {
float: left;
width: 100%;
}
Update
更新
I think it's worth mentioning that flexbox is well supported across modern browsers today. The CSS could be altered have #fullbecome a flex container, and #someidshould set it's flex grow to a value greater than 0.
我认为值得一提的是，当今的现代浏览器都很好地支持 flexbox。可以更改 CSS 已#full成为 flex 容器，并且#someid应该将其 flex 增长设置为大于 的值0。
html, body, #full {
height: 100%;
}
#full {
display: flex;
flex-direction: column;
}
#someid {
flex-grow: 1;
}
回答by Serdalis
To get a divto 100% height on a page, you will need to set each object on the hierarchy above the div to 100% as well. for instance:
要div在页面上获得100% 的高度，您还需要将 div 上方层次结构上的每个对象也设置为 100%。例如：
html { height:100%; }
body { height:100%; }
#full { height: 100%; }
#someid { height: 100%; }
Although I cannot fully understand your question, I'm assuming this is what you mean.
虽然我不能完全理解你的问题，但我假设这就是你的意思。
This is the example I am working from:
这是我正在使用的示例：
<html style="height:100%">
<body style="height:100%">
<div style="height:100%; width: 300px;">
<div style="height:100%; background:blue;">
</div>
</div>
</body>
</html>
Styleis just a replacement for the CSS which I haven't externalised.
Style只是我没有具体化的 CSS 的替代品。
回答by Jonathan Graef
This can be done with tables:
这可以通过表来完成：
<table cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr height="0%"><td>
<div id="full">
<!--contents of 1 -->
</div>
</td></tr>
<tr><td>
<div id="someid">
<!--contents of 2 -->
</div>
</td></tr>
</table>
Then apply css to make someid fill the remaining space:
然后应用css使someid填充剩余空间：
#someid {
height: 100%;
}
Now, I can just hear the angry shouts from the crowd, "Oh noes, he's using tables! Feed him to the lions!" Please hear me out.
现在，我只能听到人群中愤怒的喊叫声，“哦，不，他在用桌子！把他喂给狮子！” 请听我说完。
Unlike the accepted answer which accomplishes nothing aside from making the container div the full height of the page, this solution makes div #2 fill the remaining space as requested in the question. If you need that second div to fill the full height allotted to it, this is currently the only way to do it.
与接受的答案不同，除了使容器 div 成为页面的整个高度外，什么也没有完成，此解决方案使 div #2 按照问题中的要求填充剩余空间。如果您需要第二个 div 来填充分配给它的整个高度，这是目前唯一的方法。
But feel free to prove me wrong, of course! CSS is always better.
但是，当然可以随时证明我是错的！CSS 总是更好。
回答by Ernesto Hegi
html,
body {
height: 100%;
}
.parent {
display: flex;
flex-flow:column;
height: 100%;
background: white;
}
.child-top {
flex: 0 1 auto;
background: pink;
}
.child-bottom {
flex: 1 1 auto;
background: green;
} <div class="parent">
<div class="child-top">
This child has just a bit of content
</div>
<div class="child-bottom">
And this one fills the rest
</div>
</div>回答by Ukuser32
I know this is a late entry but even in 2016 I am surprised by the complete lack of IE support for flex (currently 11 is the only one to support it and its majorly buggy at that http://caniuse.com/#feat=flexbox) which from a business perspective is not great! So I think until IE is shut down the best solution and most cross-browser friendly one surely must be a JS/Jquery one?
我知道这是一个迟到的条目，但即使在 2016 年，我也对 IE 完全缺乏对 flex 的支持感到惊讶（目前 11 是唯一支持它的，并且在http://caniuse.com/#feat= flexbox）从商业角度来看不是很好！所以我认为在 IE 关闭之前最好的解决方案和最跨浏览器友好的解决方案一定是 JS/Jquery 吗？
Most sites already use Jquery and a very simple example (for my code) is:
大多数网站已经使用 Jquery，一个非常简单的例子（对于我的代码）是：
$('#auto_height_item').height($(window).height() - $('#header').height());
You can obviously replace window and header and let the basic math do the work. Personally I'm still not convinced about flex yet...
您显然可以替换 window 和 header，让基本的数学来完成工作。就我个人而言，我仍然不相信 flex ......
回答by H.A.
Create a div, which contains both divs (full and someid) and set the height of that div to the following:
创建一个 div，其中包含两个 div（full 和 someid）并将该 div 的高度设置为以下内容：
height: 100vh;
高度：100vh；
The height of the containing divs (full and someid) should be set to "auto". That's all.
包含 div（完整和 someid）的高度应设置为“自动”。就这样。
回答by Juan Joya
I know this is an old question, but nowadays there is a super easy form to do that, which is CCS Grid, so let me put the divs as example:
我知道这是一个老问题，但是现在有一种非常简单的形式可以做到这一点，那就是 CCS Grid，所以让我以 div 为例：
<div id="full">
<div id="header">Contents of 1</div>
<div id="someid">Contents of 2</div>
</div>
then the CSS code:
然后是CSS代码：
.full{
width:/*the width you need*/;
height:/*the height you need*/;
display:grid;
grid-template-rows: minmax(100px,auto) 1fr;
}
And that's it, the second row, scilicet, the someide, will take the rest of the height because of the property 1fr, and the first div will have a min of 100px and a max of whatever it requires.
就是这样，第二行，scilicet，someide，由于属性 1fr，将占用其余的高度，第一个 div 的最小值为 100px，最大值为它需要的任何值。
I must say CSS has advanced a lot to make easier programmers lives.
我必须说 CSS 已经进步了很多，让程序员的生活更轻松。
回答by user4533280
I added this for pages that were too short.
我为太短的页面添加了这个。
html:
html：
<section id="secondary-foot"></section>
css:
css：
section#secondary-foot {
height: 100%;
background-color: #000000;
position: fixed;
width: 100%;
}
