Question

我需要div底部来填充PAGE的剩余高度，而不是父div

＆＃13;

body, html {
  margin: 0px;
}

.top {
  background-color: green;
  width: 100px;
  height: 50px;
}

.bottom {
  background-color: red;
  width: 100px;
  height: 100%;
}

＆＃13;

<div class="top"></div>
<div class="bottom"></div>

＆＃13;

Answer 1

您可以使用calc与vh一起计算页面的100％高度减去50px DIV中的top。

看一下这个片段：

＆＃13;

body, html {
  margin: 0px;
}

.top {
  background-color: green;
  width: 100px;
  height: 50px;
}

.bottom {
  background-color: red;
  width: 100px;
  height: calc(100vh - 50px);
}

＆＃13;

<div class="top"></div>
<div class="bottom"></div>

＆＃13;

Answer 2

你可以尝试下面的代码，但要小心，它的CSS3可能不完全支持。见https://caniuse.com/#search=calc

替代方案：使用Javascript支持每个“普通”浏览器，b

body, html {
  height: 100%;
  margin: 0px;
}

.top {
  background-color: green;
  width: 100px;
  height: 50px;
}

.bottom {
  background-color: red;
  width: 100px;
  height: 100%;
  height: -webkit-calc(100% - 50px);
  height: calc(100% - 50px);
}

<div class="top"></div>
<div class="bottom"></div>

CSS填充页面的高度

2 个答案: