页面无法完全适配视口，设置body属性后仍出现垂直滚动条

问题根源 #

你用max-height: 100vh限制body高度，但这个属性只是给body设置了高度上限，并非强制让它占满视口。另外html元素默认没有高度设置，会导致body的高度计算缺少正确的父基准；再加上grid子元素的内边距、外边距若未做盒模型处理，很容易撑破容器，引发滚动条。

具体修复方案 #

1. 给html元素设置高度，让body的高度计算有可靠依据：

html {
  height: 100vh;
  margin: 0;
}

2. 把body的max-height替换为height，强制它占满视口高度：

body {
  display: grid;
  grid-template: .8fr 4fr / 1fr 4fr;
  height: 100vh;
  margin: 0;
}

3. 全局设置盒模型，避免内边距、边框额外撑大元素：

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

4. 用grid的gap属性设置网格间距，替代子元素的margin，防止溢出：

body {
  /* 保留原有属性 */
  gap: 1rem; /* 可根据需求调整间距大小 */
}

如果做完上述调整仍有滚动条，检查下grid子元素里的内容（比如长文本、大图）是否超出了分配的网格区域，这种情况给对应子元素添加overflow: auto，让内部内容滚动即可，不会影响整个页面。

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