100vh失效时如何让div的背景延伸至页面底部

解决方案 #

你遇到的是常见的流式布局高度自适应问题，之前设置的height: 100%和height: 100vh无效，核心原因是没有处理根元素高度继承，或者没有适配固定/动态高度的头部、底部区块，可按照以下两种方案修复：

方案1：固定高度头部+底部适配

如果你的页面头部、底部高度是固定值，直接修改CSS如下：

/* 首先重置根元素默认内外边距与高度 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 替换.main为你自己的主区块类名/选择器 */
.main {
  /* 括号内替换为你的头部高度、底部高度实际值 */
  min-height: calc(100% - 60px - 50px);
  background-color: [你的主区块背景色];
}

方案2：动态高度头部+底部适配（更推荐）

如果头部、底部高度不固定，用Flex布局实现自动撑开：

html, body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* 头部不需要额外设置高度 */
header {
  /* 保留你原有头部样式 */
}

/* 替换.main为你自己的主区块类名/选择器 */
.main {
  flex: 1;
  background-color: [你的主区块背景色];
}

/* 底部不需要额外设置高度 */
footer {
  /* 保留你原有底部样式 */
}

注意事项

• 不要给主区块设置固定height: 100vh，否则当页面内容超过一屏高度时，超出部分不会显示背景色，替换为min-height即可解决
• 如果主区块外层还有嵌套的父容器，需要给所有上层父容器同步设置height: 100%或者对应Flex属性，否则高度继承会失效

内容的提问来源于stack exchange，提问作者Cheryl Ju