css - 如何在各种屏幕中对页面末尾有一个固定的边距？

Question

这是我的代码。

这是目前正在寻找的东西。

我们知道灰色区域的内容高度是多种多样的。在移动设备和更大的屏幕上，如何在页面末尾设置 30 像素的固定边距（用于灰色 div）？

标签： css

Answer 1

使您的元素全高并用于calc()删除固定边距：

body {
  margin:0;
  background:pink;
}
.box {
  height:calc(100vh - 30px - 5px);
  margin:5px;
  background:grey;
}

<div class="box">
</div>