Footer背景色无法铺满全屏宽高问题求助

问题原因 #

• 浏览器默认给<body>设置了margin，导致footer左右两侧出现空白
• 未设置页面根元素和body的高度，也没有用合适的布局逻辑让footer自动定位到页面底部

解决方案 #

1. 重置默认样式消除左右空白 #

给根元素和body清除默认边距，同时统一盒模型，避免元素尺寸计算偏差：

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

2. 用Flex布局让Footer固定到底部 #

如果需要footer始终贴在页面底部（即使内容不足时也不会悬空），给body设置flex布局：

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto; /* 自动推到页面底部 */
  width: 100%; /* 确保宽度铺满屏幕 */
  /* 保留你原有的样式，可加内边距优化内容间距 */
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  background-color: #F2F2F2;
  padding: 20px 0;
}

3. 优化导航链接偏移问题 #

你原代码中用right: 36px修正链接位置是因为ul默认有左内边距，直接清除这个内边距更合理：

.footer-nav {
  display: flex;
  flex-flow: column wrap;
  list-style: none;
  padding-left: 0; /* 清除默认左内边距 */
}

footer a {
  /* 移除position和right属性 */
  color: black;
  text-decoration: none;
}

修改后的完整代码 #

CSS #

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  background-color: #F2F2F2;
  padding: 20px 0;
}

footer a {
  color: black;
  text-decoration: none;
}

footer a:hover {
  color: #0065FC;
}

.footer-nav {
  display: flex;
  flex-flow: column wrap;
  list-style: none;
  padding-left: 0;
}

.footer-item {
  margin-top: 6px;
}

HTML #

<footer>
  <nav>
    <h4>About</h4>
    <ul class="footer-nav">
      <li class="footer-item"><a href="#">Site Map</a></li>
      <li class="footer-item"><a href="#">General Terms and Conditions</a></li>
      <li class="footer-item"><a href="#">Data and Privacy</a></li>
    </ul>
  </nav>

  <nav>
    <h4>Our Accommodations</h4>
    <ul class="footer-nav">
      <li class="footer-item"><a href="#">Quality Assessments</a></li>
      <li class="footer-item"><a href="#">You have a hotel ?</a></li>
    </ul>
  </nav>

  <nav>
    <h4>Assistance</h4>
    <ul class="footer-nav">
      <li class="footer-item"><a href="#">Help Desk</a></li>
      <li class="footer-item"><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</footer>

效果说明 #

• 清除默认边距后，footer背景色会完全铺满屏幕宽度
• 通过flex布局的margin-top: auto，无论页面内容多少，footer都会固定在页面底部
• 优化导航列表内边距，解决了链接偏移的问题

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