将嵌套的div扩展到100%的剩余容器分区高度。

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.

在container 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 left side of the right image, not as it looks on the right side 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>

3 个解决方案

#1

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 without using tables?" Because of course this layout is easy with tables. But that made me think of display:table.

“尤里卡”时刻是阅读别人问的问题“我怎么能不用表格就能做到?”因为这种布局很容易使用表格。但这让我想到了展示:桌子。

As this blog post nicely argues, using display:table gives 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.

正如这篇博客文章所指出的，使用display:table提供了表格布局，没有HTML表格布局那样令人讨厌的标记开销，允许您为不同的媒体查询提供语义代码和不同的布局。

I did end up having to make one change to the mark-up: a wrapper <div> around the image. Also, max/min heights are all weird when dealing with table displays: height settings are treated as preferred heights given the constraints of parent and child elements. So setting a height of zero on a display:table-row wrapper 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.

最后，我不得不对标记做一个更改:在图像周围设置一个包装器

。此外，最大/最小高度在处理表显示时都很奇怪:根据父元素和子元素的约束，高度设置被视为首选高度。因此，在显示中设置一个0的高度:table-row包装器div使这一行恰好适合内容映像。在content div上设置100%的高度使它能够很好地填充图像与父容器的最小高度之间的空间。

Voila!

瞧!

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:

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

#2

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确实存在，但是具体使用什么取决于您针对的浏览器。

#3

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-height on 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...

更棒的是规范中的更改，这样如果您在父对象上指定最小高度，您就可以为子对象的最小高度使用百分比值，而不是要求必须为子高度百分比显式地设置父高度值以具有任何意义。但我跑题了…

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/

#1