如何用CSS为高度超过100vh的div添加margin-bottom？

可以通过CSS实现你的需求，不过更实用的思路是直接为内容区域预留Footer高度的空间，无需判断内容高度是否超过视口——因为固定定位的Footer会脱离文档流，无论内容长短，都需要避免遮挡。

以下是几种可行的实现方案：

方案一：为内容区添加底部内边距 #

直接给.body设置与Footer高度一致的底部内边距，确保最后一段内容不会被Footer挡住：

.container {
  min-height: 100vh; /* 确保容器至少占满整个视口高度 */
}

.body {
  background-color: yellow;
  padding-bottom: 40px; /* 预留Footer高度的空间 */
}

.foot {
  position: fixed;
  bottom: 0;
  height: 40px; /* 明确Footer高度 */
  width: 100%; /* 让Footer铺满视口宽度 */
  background: #fff; /* 添加背景色，避免内容穿透Footer */
}

方案二：用Flex布局优化容器结构 #

通过Flex布局让内容区域自动占满剩余空间，同时预留Footer空间：

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.body {
  background-color: yellow;
  flex: 1; /* 让内容区占满容器剩余空间 */
  padding-bottom: 40px; /* 预留Footer空间 */
}

.foot {
  position: fixed;
  bottom: 0;
  height: 40px;
  width: 100%;
  background: #fff;
}

严格实现“仅内容超视口时加底部外边距” #

如果一定要只在.body高度超过100vh时添加外边距，可以结合min-height和calc：

.body {
  background-color: yellow;
  min-height: calc(100vh - 40px); /* 内容区至少占满视口减去Footer高度的空间 */
  margin-bottom: 40px; /* 始终保留底部外边距，内容超视口时生效 */
}

.foot {
  position: fixed;
  bottom: 0;
  height: 40px;
  width: 100%;
  background: #fff;
}

完整示例代码 #

<div class="container">
  我希望用户能够滚动查看body中的所有p元素，且内容不会与footer重叠，因此需要在body类的高度超过100vh时为其设置底部外边距。

  <div class="body">
    <p>该元素的数量是可变的</p>
    <p>该元素的数量是可变的</p>
    <p>该元素的数量是可变的</p>
    <p>该元素的数量是可变的</p>
    <p>该元素的数量是可变的</p>
    <p>该元素的数量是可变的</p>
    <p>该元素的数量是可变的</p>
    <p>该元素的数量是可变的</p>
    <p>该元素的数量是可变的</p>
    <p>该元素的数量是可变的</p>
    <p>该元素的数量是可变的</p>
  </div>

  <div class="foot">
    <p>此内容应始终显示在页面底部</p>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Inaara Kalani