页面底部出现无法移除空白块，元素检查无对应节点求助

这种情况我之前踩过坑，太让人头疼了！明明元素检查器啥都看不到，空白却顽固地留在那儿。结合你说的情况，给你几个排查方向：

1. 同时设置html和body的高度与边距 #

你只设置了body的height:100%，但html元素默认也有样式，得一起重置：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 避免横向滚动条导致的底部空白 */
}

很多时候就是因为html没同步设置高度，导致body的100%高度不生效。

2. 检查浮动元素是否未清除 #

如果页面里有使用float属性的元素，父容器没有清除浮动的话，很容易出现这种“幽灵空白”。给包含浮动元素的父容器添加清除浮动的样式：

/* 通用清除浮动的伪元素方法 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后给父容器加上clearfix类就行。

3. 排查viewport设置（移动端场景） #

如果是移动端页面，viewport配置不正确也会导致底部出现空白。确保你的HTML头部有这个meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

viewport-fit=cover可以解决某些刘海屏、全面屏设备的适配问题，避免底部留白。

4. 检查body的overflow属性 #

有时候body的默认overflow行为会导致异常空白，试试强制设置：

body {
  overflow-y: auto; /* 自动处理纵向滚动，避免不必要的留白 */
}

5. 排查隐藏的伪元素或定位元素 #

虽然元素检查器看不到，但可能存在一些绝对定位、固定定位的元素，或者是某个元素的::before/::after伪元素在页面底部占了空间。可以全局搜索CSS里的伪元素，或者用浏览器的元素检查器的“搜索”功能查找可能的隐藏元素。

如果以上方法都没解决问题，麻烦把完整的HTML结构和CSS代码贴出来，这样能更精准定位问题~

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