CSS Grid搭建网页面板100vh出现滚动条及移动端适配问题求助

问题原因 #

• 100vh滚动条问题：你的Grid行配置错误，grid-template-rows: 1fr仅声明了1行高度，但grid-template-areas实际定义了「导航栏+内容区」2行布局，同时给SideNav单独设置了height: 100vh，导航栏本身的高度加上侧边栏的100vh总高度超过视口，就会出现多余滚动条。
• 移动端适配异常：侧边栏宽度写死250px，小屏设备下宽度不足会导致布局挤压，同时没有限制内容区的滚动规则，内容溢出时会触发整个页面滚动而非仅内容区滚动。
• 要实现「导航栏、侧边栏固定，仅内容区滚动」的效果，需要把整个容器高度限制为视口高度，仅给内容区开启纵向溢出滚动。

修复后完整代码 #

CSS #

* {
  box-sizing: border-box; /* 全局统一盒模型，避免padding/border撑宽元素 */
}
body {
  margin: 0;
}
.container {
  display: grid;
  width: 100vw;
  height: 100vh; /* 整个容器占满视口高度 */
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: auto 1fr; /* 第一行导航栏自适应内容高度，第二行占满剩余高度 */
  gap: 0;
  grid-template-areas:
    "Navbar Navbar Navbar"
    "SideNav Content-Area Content-Area";
}
.Navbar { 
  grid-area: Navbar; 
  background-color: blue;
  padding: 12px; /* 可按需调整导航栏内边距 */
}
.SideNav { 
  grid-area: SideNav; 
  background: green; 
  overflow-y: auto; /* 侧边栏内容过多时也可独立滚动，不需要可删除 */
}
.Content-Area { 
  grid-area: Content-Area; 
  overflow-y: auto; /* 仅内容区溢出时滚动 */
  padding: 12px;
}
/* 移动端适配 */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 80px 1fr 1fr; /* 小屏下侧边栏收窄，要隐藏的话设为0即可 */
  }
}

HTML #

<div class="container">
  <div class="Navbar">tester</div>
  <div class="SideNav">tea</div>
  <div class="Content-Area">test</div>
</div>

核心修改点说明 #

1. 给.container加height: 100vh，将整个布局限制在视口范围内，删除.SideNav上的独立height:100vh配置
2. 修正Grid行配置为grid-template-rows: auto 1fr，适配2行的布局结构
3. 仅给.Content-Area加overflow-y: auto，实现仅内容区滚动的效果
4. 全局增加盒模型统一配置，加移动端媒体查询适配小屏显示

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