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

Question

我有一个包含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>

Answer 1

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

"尤里卡"时刻正在阅读其他问题,人们在问"我怎么能不用桌子呢？" 因为当然这种布局很容易使用表格.但这让我想到了display:table.

正如这篇博文很好地论证的那样,使用display:table给你的表格布局没有像HTML表格布局那样令人讨厌的标记开销,允许你为不同的媒体查询提供语义代码和不同的布局.

我最终不得不对标记进行一次更改:<div>图像周围的包装.此外,在处理表格显示时,最大/最小高度都很奇怪:height考虑到父元素和子元素的约束,设置被视为首选高度.因此,在display:table-row包装器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或移动浏览器中进行测试,请发表评论.