小编Mag*_*ede的帖子

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