Question

.row2是固定高度的页脚，粘贴在窗口的底部。我想让.row1占据窗口中所有剩余的高度，这样它内部的图像就可以增长到.row1高度。

即使使用flexbox，我也无法弄清楚如何做到这一点。

我简化的html结构是：

<div class="wrapper">
    <div class="row1">This row takes up remaining space in height, image should scale up to touch footer
        <br />
        <img src="http://www.placehold.it/200x200" />
    </div>
    <div class="row2">Fixed height footer always stuck to bottom of window</div>
</div>

JSFiddle如下： http://jsfiddle.net/1swdf6eh/5/

Answer 1

.row2的高度固定。因此，您可以将calc(100% - 180px)用于.row1

.wrapper {
  height: 100vh;
  border: 1px solid black;
  position: relative;
}
.row1 {
  text-align: center;
  background: #ececec;
  height: calc(100% - 180px);
}
img {
  height: 100%;
}
.row2 {
  height: 180px;
  width: 100%;
  background: blue;
  color: white;
  text-align: center;
  position: absolute;
  bottom: 0;
}

<div class="wrapper">
  <div class="row1">This row takes up remaining space in height, image should scale up to touch footer
    <br />
    <img src="http://www.placehold.it/200x200" />
  </div>
  <div class="row2">Fixed height footer always stuck to bottom of window</div>
</div>

Answer 2

你真的必须设置row2绝对吗？尝试将包装器高度除以％，因此不要给第2行180 px，给它高度5％并删除绝对定位，并给第1行高度95％

使行占用剩余空间的高度

2 个答案: