Html 使嵌套 div 拉伸到剩余容器 div 高度的 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21222663/
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
Make nested div stretch to 100% of remaining container div height
提问by Magnus the Swede
I have a containter div, which I want to stretch to at least the entire height of the window. If there's a lot of content in the container div, I want it to stretch to more than the window's height. This works.
我有一个容器 div，我想将其至少拉伸到窗口的整个高度。如果容器 div 中有很多内容，我希望它拉伸到超过窗口的高度。这有效。
In the container div I have an image. After/below the image, I have a second div. I want this nested div to stretch vertically to fill the remaining space of the container div. This doesn't work.
在容器 div 中，我有一个图像。在图像之后/下方，我有第二个 div。我希望这个嵌套的 div 垂直拉伸以填充容器 div 的剩余空间。这不起作用。
I've tried to illustrate the problem in this image. I want the div to stretch in the way illustrated in the leftside of the right image, not as it looks on the rightside of the right image.
我试图在这张图片中说明这个问题。我希望div来在图文并茂的方式伸展左右图像的侧面，而不是因为它看起来在右侧的右侧图像的边。
The following is my code. As you can see, in this code I don't even try to make the div under the image stretch vertically, as nothing has worked. "Height: 100%" doesn't do the trick, as I've defined "100%" to be the height of the window by default, in order to make the container div to stretch to at least the window's height.
以下是我的代码。如您所见，在此代码中，我什至没有尝试使图像下的 div 垂直拉伸，因为没有任何效果。“高度：100%”并不能解决问题，因为我默认将“100%”定义为窗口的高度，以使容器 div 至少拉伸到窗口的高度。
Style:
风格：
* {
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:
HTML：
<div class="container">
<img src="image.jpg" width="100%">
<div class="bottom">
LOREM IPSUM
</div>
</div>
采纳答案by AmeliaBR
I have spent way too much time trying to figure it out, but by George I've got it!
我花了太多时间试图弄清楚，但乔治我已经明白了！
The "Eureka" moment was reading other questions where people were asking "how can I do it withoutusing tables?" Because of course this layout is easy with tables. But that made me think of display:table.
“尤里卡”时刻正在阅读其他问题，人们问“我如何在不使用表格的情况下做到这一点？” 当然，这种布局对于表格来说很容易。但这让我想到了display:table。
As this blog postnicely argues, using display:tablegives you table layouts without the nasty mark-up overhead as HTML table layouts, allowing you to have semantic code and different layouts for different media queries.
正如这篇博文很好地论证的那样， usingdisplay:table为您提供了表格布局，而没有像 HTML 表格布局那样讨厌的标记开销，允许您为不同的媒体查询使用语义代码和不同的布局。
I did end up having to make onechange to the mark-up: a wrapper <div>around the image. Also, max/min heights are all weird when dealing with table displays: heightsettings are treated as preferred heights given the constraints of parent and child elements. So setting a height of zero on a display:table-rowwrapper div made that row fit to the content image exactly. Setting a height of 100% on the content div made it nicely fill the space in between the image and the minimum height of the parent container.
我最终不得不对标记进行一项更改：<div>图像的包装。此外，在处理表格显示时，最大/最小高度都很奇怪：height考虑到父元素和子元素的约束，设置被视为首选高度。因此，在display:table-row包装器 div上设置高度为零使该行完全适合内容图像。将内容 div 的高度设置为 100% 可以很好地填充图像和父容器的最小高度之间的空间。
Condensing just the essential code:
仅浓缩基本代码：
Markup:
标记：
<div class="container">
<div class="wrapper">
<img src="http://placekitten.com/600/250" />
</div>
<div class="bottom" contentEditable="true">
</div>
CSS:
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 */
}
Works in Firefox 25, Chrome 32, Opera 18 and IE10. Doesn't work in IE 8, but then what does? It doesn't look brokenin IE8, it just doesn't stretch to fit.
适用于 Firefox 25、Chrome 32、Opera 18 和 IE10。在 IE 8 中不起作用，但那又怎样呢？它在 IE8 中看起来并没有损坏，只是无法拉伸以适应。
If you can test it in Safari, IE9, or mobile browsers, leave a comment.
如果您可以在 Safari、IE9 或移动浏览器中进行测试，请发表评论。
回答by Stefan Fisk
The non-javascript way is to use flexbox. How exactly depends on a lot of details, but you can play around at http://the-echoplex.net/flexyboxes/.
非 javascript 的方式是使用 flexbox。具体如何取决于很多细节，但您可以在http://the-echoplex.net/flexyboxes/ 上玩。
Polyfills do exists, but what exactly to use depends on which browsers you are targeting.
Polyfill 确实存在，但究竟使用什么取决于您的目标浏览器。
回答by AmeliaBR
Flex boxes will be nice, when they are widely supported.
当 Flex box 得到广泛支持时，它们会很好。
Even nicer would be a change in the spec so that if you specify min-heighton a parent, you can use percentage values for a child object's min-height, instead of requiring that the parent height value has to be set explicitly for child height percentages to have any meaning. But I digress...
更好的是规范中的更改，以便如果您min-height在父对象上指定，则可以使用子对象的百分比值min-height，而不是要求必须明确设置父高度值才能使子高度百分比具有任何意义。但我离题了...
In the meantime, using "faux columns"can sort of get the effect you want. The concept is simple: you let the child div have an auto height, but then you paint the background of the parent such that it looks like the child div's background is continuing to the full height.
同时，使用“假列”可以达到您想要的效果。概念很简单：您让子 div 具有自动高度，但随后您绘制了父 div 的背景，使其看起来像子 div 的背景继续达到全高。
The example at that link does it with a background image, but you can use a background gradient if you don't mind sacrificing support for Safari and IE9-. (Remembering that lack of support just means not-quite-so-pretty, everything is functionally the same.)
该链接中的示例使用背景图像进行处理，但如果您不介意牺牲对 Safari 和 IE9- 的支持，则可以使用背景渐变。（请记住，缺乏支持仅意味着不那么漂亮，所有功能在功能上都是相同的。）
Example here:
http://fiddle.jshell.net/y6ZwR/3/
这里的例子：http:
//fiddle.jshell.net/y6ZwR/3/
