使嵌套div伸展到剩余容器div高度的100％
我有一个遏制器div，我想至少延伸到窗口的整个高度。 如果容器div中有很多内容，我希望它可以伸展到窗口的高度以上。 这工作。
在容器div中我有一个图像。 在图像之后/之后，我有第二个div。 我想这个嵌套的div垂直拉伸填充容器div的剩余空间。 这不起作用。
我试图说明这个图像中的问题。 我希望div能够以右图所示的方式展开，而不是像右图所示的那样。
以下是我的代码。 正如你所看到的，在这段代码中，我甚至不会试图让图像下的div垂直伸展，因为没有任何工作。 “高度：100％”并不能解决问题，因为我默认定义“100％”为窗口的高度，以便使容器div伸展到至少窗口的高度。
样式：
* {
margin: 0; padding: 0;
}
body {
overflow-y: scroll;
overflow-x: hidden;
}
body, html {
height: 100%;
}
.container {
display: block;
overflow: auto;
min-height: 100%;
height: 100%;
height: auto;
}
.bottom {
width: 100%;
}
HTML：
<div class="container">
<img src="image.jpg" width="100%">
<div class="bottom">
LOREM IPSUM
</div>
</div>
我花了太多时间试图弄清楚，但乔治我已经掌握了它！
“尤里卡”时刻正在阅读其他问题，人们在问“我怎么能不用桌子？” 因为这个布局当然很容易使用表格。 但是这让我想到了display:table 。
正如这篇博文很好地指出的那样，使用display:table为您的表格布局提供没有讨厌的标记开销的HTML表格布局，使您可以为不同的媒体查询制定语义代码和不同的布局。
我最终不得不对标记进行一次更改：图像周围的一个包装器<div> 。 另外，在处理表格显示时，最大/最小高度都是奇怪的：考虑到父元素和子元素的约束， height设置被视为首选高度。 因此，在display:table-row上设置零高度display:table-row wrapper div使该行恰好适合内容图像。 在内容div上设置100％的高度使其很好地填充图像与父容器的最小高度之间的空间。
瞧！
冷凝只是基本的代码：
标记：
<div class="container">
<div class="wrapper">
<img src="http://placekitten.com/600/250" />
</div>
<div class="bottom" contentEditable="true">
</div>
CSS：
body {
overflow-y: scroll;
overflow-x: hidden;
}
body, html {
height: 100%;
}
.container {
display: table;
width: 100%
height: 100%; /* this will be treated as a Minimum!
It will stretch to fit content */
}
div.wrapper{
display:table-row;
height:0px; /* take as little as possible,
while still fitting content */
}
img {
display:table-cell;
width:100%; /*scale to fit*/
}
.bottom {
display:table-cell;
height:100%; /* take as much as possible */
}
适用于Firefox 25，Chrome 32，Opera 18和IE10。 在IE 8中不起作用，但接下来会发生什么？ 它在IE8中看起来不算破，它只是不适合。
如果您可以在Safari，IE9或移动浏览器中测试它，请发表评论。
非JavaScript方式是使用flexbox。 具体取决于很多细节，但你可以在http://the-echoplex.net/flexyboxes/上玩。
Polyfills确实存在，但具体使用取决于您定位的浏览器。
Flex盒子在被广泛支持时会很好。
即使更好也会改变规格，因此如果您在父min-height上指定min-height ，则可以将百分比值用于子对象的min-height ，而不要求必须为子高度明确设置父级高度值百分比有任何意义。 但我离题了...
同时，使用“虚拟列”可以获得您想要的效果。 这个概念很简单：让子div具有自动高度，但是然后绘制父级的背景，使其看起来像子div的背景继续达到全高。
该链接中的示例使用背景图像进行此操作，但如果您不介意牺牲对Safari和IE9的支持，则可以使用背景渐变。 （记住缺乏支持只是意味着不够漂亮，一切在功能上都是一样的。）
示例：
http://fiddle.jshell.net/y6ZwR/3/
上一篇: Make nested div stretch to 100% of remaining container div height