设置main标签height:100%仍无法铺满页面？求解决方案

问题原因 #

CSS中，元素设置百分比高度时，必须依赖父元素有明确的高度值才能生效。你的main标签父元素是body，而body的父元素html默认高度仅为内容高度，并未占满视口。所以给main加height:100%时，没有可继承的高度基准，自然看不到效果。

两种可行解决方案 #

方案1：给html和body设置100%高度，精确计算main高度

通过给html、body设置100%高度，为main提供高度基准，再用calc减去nav的高度，避免整体页面超出视口：

html, body {
  height: 100%;
  margin: 0;
}

main {
  padding: 5%;
  background: #3E3E3E;
  height: calc(100% - 10vh); /* 减去nav的10vh高度 */
  overflow-y: auto; /* 内容过多时main内部可滚动 */
}

方案2：使用Flex布局（推荐）

让body成为Flex容器，设置垂直方向排列，main通过flex:1自动占据nav之外的剩余空间，无需手动计算高度，适配性更强：

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

main {
  padding: 5%;
  background: #3E3E3E;
  flex: 1; /* 自动填充剩余空间 */
  overflow-y: auto;
}

修改后的完整CSS示例（Flex方案） #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

nav {
  height: 10vh;
  width: 100%;
  background: #3E3E3E;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 33px;
  color: white;
}

main {
  padding: 5%;
  background: #3E3E3E;
  flex: 1;
  overflow-y: auto;
}

.play-bot,
.play-friend,
.set-a-scenario,
.matches-log {
  width: 99%;
  margin-top: 3px;
  height: 100px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  background: #9933CC;
  color: #F5F5F5;
}

内容的提问来源于stack exchange，提问作者Yosef Pulikkotil