Chrome响应式模式下消除main与footer间隙并固定footer至底部

先处理父级Grid布局的情况 #

如果你的页面外层用了display: grid，直接通过Grid的行分配就能解决间隙和footer固定问题：

• 给Grid容器设置以下样式，让#bases所在行自动填满footer上方的剩余空间：

  .grid-container {
    display: grid;
    min-height: 100vh; /* 强制容器占满整个视口高度 */
    grid-template-rows: 1fr auto; /* 第一行（#bases）占满剩余空间，footer行自适应高度 */
  }
  

  这样#bases会自动延伸到footer附近，不会出现多余间隙，footer也自然固定在页面底部。

通用Flex布局方案（适合非Grid场景） #

如果Grid布局不适用，用Flex也能快速解决：

• 给body设置Flex布局，让内容区自动占满空间：

  body {
    min-height: 100vh;
    margin: 0; /* 清除浏览器默认边距 */
    display: flex;
    flex-direction: column;
  }
  #bases {
    flex: 1; /* 让#bases占满除footer外的所有可用空间 */
  }
  footer {
    /* 要是需要滚动页面时footer也固定不动，就加下面的样式，注意给#bases加padding-bottom避免内容被遮挡 */
    /* position: fixed;
    bottom: 0;
    width: 100%;
    background: #fff; */
  }
  

关于position:relative无效的说明 #

position: relative只是让元素相对自身位置偏移，完全不会改变页面的布局流，所以对消除间隙和固定footer没用，别浪费时间在这上面。

响应式适配（视口<699px） #

把上述样式放进媒体查询里，确保只在小屏生效：

@media (max-width: 699px) {
  /* 这里放Grid或Flex的样式，比如： */
  .grid-container {
    min-height: 100vh;
    grid-template-rows: 1fr auto;
  }
}

额外排查点 #

• 检查#bases有没有设置固定高度，或者过大的margin-bottom/padding-bottom，这些也会导致间隙，要清除不必要的固定值。
• 如果用Grid，确保#bases是Grid容器的直接子元素，否则行分配规则不会生效。

内容的提问来源于stack exchange，提问作者Keap's