Question

我有一个包含div，我希望至少延伸到窗口的整个高度。如果容器div中有很多内容，我希望它延伸到窗口的高度以上。这很有效。

在容器div中我有一个图像。在图像之后/之下，我有第二个div。我希望这个嵌套的div垂直拉伸以填充容器div的剩余空间。这不起作用。

我试图在this image中说明问题。我希望div以右图像的 left 侧面所示的方式拉伸，而不是在右图像的右侧侧看。

以下是我的代码。正如你所看到的，在这段代码中，我甚至没有尝试使图像下的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>

Answer 1

我花了太多时间试图解决这个问题，但乔治已经知道了！

“Eureka”时刻正在阅读其他问题，人们在问“如果没有使用表格，我该怎么做？”因为当然这种布局很容易使用表格。但这让我想起了display:table。

正如this blog post所说的那样，使用display:table可以为您提供表格布局，而不会像HTML表格布局那样产生令人讨厌的标记开销，从而允许您为不同的媒体查询提供语义代码和不同的布局。

我最终不得不对标记进行一次更改：图像周围的包装<div>。此外，在处理table displays时，最大/最小高度都很奇怪：在父元素和子元素的约束下，height设置被视为首选高度。因此，在display:table-row包装div上设置零高度会使该行完全适合内容图像。在内容div上设置100％的高度，可以很好地填充图像和父容器的最小高度之间的空间。

Voila!

简化基本代码：

标记：

<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或移动浏览器中进行测试，请发表评论。

Answer 2

非JavaScript方式是使用flexbox。具体取决于很多细节，但您可以在http://the-echoplex.net/flexyboxes/。

进行游戏

Polyfills确实存在，但具体使用的取决于您要定位的浏览器。

Answer 3

当受到广泛支持时，Flex盒子会很好。

甚至更好的是规范中的更改，因此如果您在父级上指定min-height，则可以使用子对象min-height的百分比值，而不是要求必须明确设置父高度值才能使子高度百分比具有任何含义。但我离题了......

与此同时，使用"faux columns"可以获得您想要的效果。这个概念很简单：你让子div具有一个自动高度，然后你绘制父级的背景，使得看起来子div的背景持续到整个高度。

该链接的示例使用背景图片，但如果您不介意sacrificing support for Safari and IE9-，则可以使用背景渐变。（记住，缺乏支持只意味着不那么漂亮，一切在功能上都是一样的。）

这里的例子：
http://fiddle.jshell.net/y6ZwR/3/

使嵌套div伸展到剩余容器div高度的100％

3 个答案: