Question

我想让div中的最后一个body填补余下的空间，但我遇到了一些麻烦。我有这个HTML：

<body>
  <div class="content"></div>    
  <div class="footer"></div> 
</body>

和这个CSS：

body, html {
    height: 100%;
}

.content {
  height: 100px;
  background-color: red;
}

.footer {
  height: 100%;
  background-color: #ccc;
}

这是JSFiddle。

由于出现了垂直滚动条，因此无效。

知道我该怎么做吗？

Answer 1

您可以进行计算：

.footer {
  height: calc(100% - 100px);
}

另外，添加此样式：

body,html {
  margin: 0px;
}

<小时/> 如果content的高度未知，您可以使用flexbox解决方案：

body, html {
  height: 100%;
  width: 100%;
  margin: 0px;
  display: flex;
  flex-direction: column;
}

.footer {
  flex: 1;
}