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

小编典典

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

css

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

阅读 472

2020-05-16

共1个答案

小编典典

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

“尤里卡（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 */
}

适用于Firefox 25，Chrome 32，Opera 18和IE10。在IE 8中不起作用，但是那又是什么呢？它在IE8中看起来没有损坏
，只是无法拉伸而已。

如果您可以在Safari，IE9或移动浏览器中对其进行测试，请发表评论。

2020-05-16