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

Question

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

csshtml

37

我有一个容器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%;
}

<div class="container">

  <img src="image.jpg" width="100%">

  <div class="bottom">
    LOREM IPSUM
  </div>

</div>

- Magnus the Swede

2

可能是 https://dev59.com/6XVD5IYBdhLWcg3wGXhI 的重复问题？ - LindaJeanne

1

图片链接现在已经失效。 - pipe

3个回答

1

当Flex boxes得到广泛支持时会很好。

如果规范发生改变，指定父级min-height时，可以使用百分比值作为子对象的min-height，而不需要明确设置父级高度值以使子级高度百分比具有任何含义，那将更好。但我偏离了主题...

与此同时，使用"模拟列"可以得到所需的效果。概念很简单：将子div设置为自动高度，然后涂上父元素的背景，使其看起来像是子元素的背景继续延伸至整个高度。

该链接中的示例是使用背景图片实现的，但如果你不介意牺牲对Safari和IE9-的支持,你也可以使用背景渐变。（请记住，缺少支持只意味着外观不太美观，所有功能都是相同的。）

以下是示例：
http://fiddle.jshell.net/y6ZwR/3/

- AmeliaBR

这里还有一件很好的事情。如果您可以在calc()函数中使用“视口单位”就更好了。我不知道视口单位，可能是因为没有calc()支持而无用。我尝试解决它，但是生成的代码几乎无法理解，并且仍然不能正确地调整所有大小：http://fiddle.jshell.net/y6ZwR/5/ - AmeliaBR

0

非使用JavaScript的方法是使用flexbox。具体取决于许多细节，但您可以在http://the-echoplex.net/flexyboxes/上进行尝试。

虽然存在Polyfills，但要使用哪种取决于您针对哪些浏览器。

- Stefan Fisk

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AmeliaBR · Accepted Answer

我花了太多的时间来尝试弄清楚它，但是我终于搞定了！

“欧里卡”时刻是在阅读其他问题时，人们问“如何在不使用表格的情况下实现它？” 因为当然，使用表格可以轻松完成此布局。但是这让我想起了display:table。

正如这篇博客文章所论述的那样，使用display:table可以为您提供表格布局，而无需HTML表格布局中的讨厌的标记开销，从而允许您拥有语义代码和不同的媒体查询布局。

我最终确实需要对标记进行一个更改：在图像周围加上一个包装器

。此外，当处理表格显示时，最大/最小高度都很奇怪：height设置被视为给定父元素和子元素约束条件的首选高度。因此，在display:table-row包装器div上设置零高度使该行恰好适合内容图像。在内容div上设置100％的高度使其完美地填充了图像和父容器的最小高度之间的空间。

大功告成！

仅精简本质代码：

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 */
}

<div class="container">
  <div class="wrapper">
    <img src="http://placekitten.com/600/250" />
  </div>
  <div class="bottom" contentEditable="true">
  </div>

适用于Firefox 25、Chrome 32、Opera 18和IE10。在IE8中不起作用，但是谁会呢？在IE8中它看起来并不损坏，只是不能拉伸以适应页面。如果您可以在Safari、IE9或移动浏览器中测试，请留下评论。