如何消除网站页脚下方的空白区域？已尝试多种方法未解决

云原生阿岚

2026-8-6

解决页脚下方空白区域的问题

先看你当前的核心问题：页脚CSS里的bottom: 190px是导致下方空白的直接原因——这个属性会把页脚向上偏移190px，页脚原本的位置就会留下空白区域。结合你的代码，给你几个针对性的修复方案：

修复步骤

移除错误的偏移属性
直接删掉页脚样式里的bottom: 190px，这是空白产生的根源。
确保页面根元素占满视口
给html和body同时设置高度，避免内容不足时页面高度不够：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

让页脚自适应贴底（可选）
如果希望页脚始终固定在页面底部（不管内容多少），可以用flex布局实现：

给body设置flex布局，让主内容区自动填充剩余空间：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 用vh确保占满视口高度 */
}

/* 给你的主内容容器添加这个样式（替换成实际的类名/标签） */
.main-content {
  flex: 1; /* 占据除页脚外的所有剩余空间 */
}

优化页脚样式
修正页脚里的无效属性，调整宽度让它适配页面：

/* 页脚修正后的样式 */
.footer {
  position: relative;
  display: flex;
  background-color: #191414;
  height: 170px;
  width: 100%; /* 替换固定宽度，自适应页面 */
  justify-content: flex-start; /* left不是有效值，用flex-start */
  align-items: flex-start; /* 同上 */
  border: 5px solid blue;
}