如何移除网页页脚下方的空白区域？

嘿，我来帮你搞定页脚下方的空白问题！这种情况我碰到过好多次，大概率是几个常见的CSS细节没处理到位，咱们一步步来排查解决：

• 先补上body的默认样式重置
  你已经给html设置了margin:0; padding:0;，但浏览器默认给body也加了margin，直接补上这行CSS：

  body {
    margin: 0;
    padding: 0;
  }
  

• 检查页脚及父容器的边距/内边距
  有时候页脚自身的margin-bottom，或者它的父容器的padding-bottom会偷偷留出空白，直接给页脚清零试试：

  footer {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  

• 用按钮外层的div把内容“推”到底部（推荐flex布局）
  你提到按钮外层有个div，咱们可以利用flex布局让这个div自动固定在底部，彻底消除空白：

  1. 给页面最外层的容器（比如body或者包裹所有内容的wrapper）设置：

     body {
       display: flex;
       flex-direction: column;
       min-height: 100vh; /* 确保容器至少占满整个视口高度 */
     }
     

  2. 给按钮外层的div加上自动上边距，让它自动推到底部：

     .your-button-div-class { /* 替换成你实际的div类名 */
       margin-top: auto;
     }
     

  这种方法不需要绝对定位，不会出现内容被覆盖的问题，是现在最常用的布局方式。

• 备选方案：绝对定位固定页脚
  如果flex布局不适合你的场景，也可以用绝对定位把页脚钉在底部：

  body {
    position: relative;
    min-height: 100vh;
  }
  footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-bottom: 0;
  }
  

  注意：如果页面内容比较长，记得给body或者主内容区加上padding-bottom，避免内容被页脚挡住。

• 排查隐藏的元素或外边距折叠
  如果上面的方法都没用，打开浏览器开发者工具（F12），查看页脚下方的空白区域，看看是不是有隐藏的元素（比如高度不为0的空div），或者是相邻元素的外边距折叠导致的。如果是外边距折叠，可以给元素加上overflow: hidden;或者display: inline-block;来解决。

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