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

Z时代
2024-01-10
分类：问答

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

回答：

我花了太多时间试图解决这个问题，但是到了乔治，我已经明白了！

“尤里卡（Eureka）”时刻正在阅读其他问题，人们在问“我不使用桌子怎么办？”

当然，由于使用表，这种布局很容易。但这让我想到了display:table。

使用可以display:table为您提供表格布局，而无需像HTML表格布局那样烦琐的标记开销，从而使您可以针对不同的媒体查询使用语义代码和不同的布局。

我最终不得不对标记做一个

更改：<div>在图像周围使用包装纸。另外，在处理表格显示时，最大/最小高度都是很奇怪的：height鉴于父级和子级元素的限制，设置被视为首选高度。因此，在display:table-

row包装div 上将高度设置为零可使该行完全适合内容图像。在content

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