CSS Grid布局问题：Footer无法显示在底部的原因排查

问题描述 #

使用CSS Grid布局时，Footer元素无法显示在页面底部，布局效果不符合预期。

原始代码 #

HTML代码

<div>
  <div id="navbar" class="box">Navbar</div>
  <div id="sidenav " class="box">Side Navbar</div>
  <div id="main " class="box">Main</div>
  <div id="footer " class="box">Footer</div>
</div>

SCSS代码

div{
  display: grid;
  width:100%;
  height: 100%;
  grid-template-columns: 25% 75% 25%;
  grid-gap: 15px;
  grid-template-rows:25% 50% 25% ;

  grid-template-areas:
  "hd hd hd "
  "sd ma ma "
  "ft ft ft ";

  .box{
    display: flex;
    border: 3px solid red;
    margin: auto;
    align-items: center;
    justify-content: center;
  }
  #navbar{
    grid-area: hd;
  }
  #sidenav{
    grid-area: sd;
  }
  #main{
    grid-area: ma;
  }
  #footer{
    grid-area: ft;
  }
}

问题根源 #

1. ID选择器不匹配：HTML中sidenav、main、footer的id属性末尾带有空格（如id="sidenav "），但CSS选择器是#sidenav，两者无法匹配，导致这些元素未应用grid-area规则，布局逻辑失效。
2. 容器高度无效：Grid容器设置了height:100%，但它的父元素（html、body）默认没有高度设置，容器的百分比高度无法继承到视口高度，仅能随内容高度自适应，无法撑满整个页面。
3. 列宽总和溢出：grid-template-columns设置为25% 75% 25%，总宽度达125%，再加上grid-gap的间距，会导致页面横向溢出，进一步打乱布局结构。

修复方案 #

修正后的HTML代码（去掉ID的多余空格）

<div class="grid-container">
  <div id="navbar" class="box">Navbar</div>
  <div id="sidenav" class="box">Side Navbar</div>
  <div id="main" class="box">Main</div>
  <div id="footer" class="box">Footer</div>
</div>

修正后的SCSS代码

// 先给根元素设置高度，让Grid容器能继承视口高度
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.grid-container {
  display: grid;
  width: 100%;
  height: 100%;
  // 调整列宽总和为100%，匹配布局需求
  grid-template-columns: 25% 75%;
  grid-gap: 15px;
  grid-template-rows: 25% 50% 25%;
  // 对应调整grid-template-areas，匹配列数
  grid-template-areas:
    "hd hd"
    "sd ma"
    "ft ft";
  // 避免内容贴边，同时用box-sizing确保padding不增加容器宽度
  padding: 0 15px;
  box-sizing: border-box;

  .box{
    display: flex;
    border: 3px solid red;
    align-items: center;
    justify-content: center;
    // 去掉margin:auto，避免干扰Grid的布局定位
    margin: 0;
  }

  #navbar {
    grid-area: hd;
  }

  #sidenav {
    grid-area: sd;
  }

  #main {
    grid-area: ma;
  }

  #footer {
    grid-area: ft;
  }
}

说明 #

• 去掉ID的多余空格后，CSS选择器能正确匹配元素，Grid布局规则生效。
• 给html和body设置height:100%，让Grid容器的height:100%能继承到视口高度，撑满整个页面。
• 调整列宽总和为100%，避免横向溢出，同时对应修改grid-template-areas的结构，确保布局逻辑一致。

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