CSS Grid容器边框不随内容延伸、滚动时仅显示到100vh位置怎么办

问题原因 #

你为.grid-container设置了固定高度属性height: 100vh，该属性会强制容器高度固定为视口高度，当内部内容总高度超过视口高度时，内容会溢出容器范围，因此容器的边框只能渲染到100vh的位置，无法覆盖溢出的内容区域。

解决方案 #

将固定高度属性替换为最小高度属性即可，既可以保证内容较少时容器默认撑满整个视口，又可以在内容较多时自动撑开高度包裹所有子元素：

/* 仅需修改 .grid-container 中的高度属性即可，其余代码保持不变 */
.grid-container {
  min-height: 100vh; /* 替换原来的 height: 100vh */
  border: 10px solid #14a76c;
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main ads"
    "footer footer footer";      
  grid-template-columns: 1fr 3fr 1fr;
  grid-auto-rows: max-content;
}

修改后容器边框会跟随容器高度同步延伸，不会再出现滚动时下边框缺失的问题。

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