CSS Grid设置height:100%时如何在fixed header和网格容器间添加间距

问题原因 #

• 你给.header设置了position: fixed，固定定位元素会脱离正常文档流，后续的.container在布局时不会识别固定定位元素的占位，所以给header加的margin-bottom不会在两个元素之间产生间距。
• .container的height: 100%vh是语法错误，百分比和vh单位不能混用，该属性不会生效。
• 固定定位的header会悬浮在页面最上层，如果不给后面的内容让出对应高度，container顶部的内容会被header遮挡。

解决方案 #

修改对应CSS即可，修改点如下：

1. 修正.container的高度写法
2. 给.container添加顶部内边距，让出header的高度，实现你需要的间距效果
3. 统一高度单位为vh，避免百分比高度的适配问题

修改后的完整CSS代码：

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

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

.header {
  width: 100%;
  position: fixed;
  height: 10vh;
  background-color: red;
}

.container {
  height: 100vh;
  padding-top: 10vh;
  display: grid;
  grid-template-areas: "side1 middle side2" "footer footer footer";
  grid-template-rows: 80% 20%;
  grid-template-columns: 15% 70% 15%;
}

.side1 {
  grid-area: side1;
}

.middle {
  grid-area: middle;
  overflow: auto;
}

.side2 {
  grid-area: side2;
}

.footer {
  grid-area: footer;
}

HTML代码无需修改，调整后即可实现header固定、后续网格布局正常显示的效果，不会出现内容遮挡问题，也能达到你想要的间距效果。

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