谷歌克隆页面如何固定footer在视口底部且避免页面溢出？

问题根因 #

1. 你给html设置的是max-height: 100%，而非最小高度限制，无法保证body始终占满整个视口高度
2. footer采用position: absolute定位时，没有给父级body设置position: relative，定位基准是整个文档而非视口；同时footer内部的.footer1、.footer2、.footer3都设置了top相对偏移，把元素撑出了footer容器，导致页面溢出
3. 没有做内容区域自适应占高，absolute定位的footer会在内容高度超过视口时，和主体内容重叠

修复方案 #

采用flex弹性布局实现footer粘性底部，兼容性好且不会出现溢出/重叠问题，修改代码如下：

1. 修改html和body基础样式 #

html {
  /* 删掉原来的max-height: 100% */
  min-height: 100vh;
}
body {
  font-family: Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

2. 给main设置自适应占高 #

main {
  flex: 1;
}

3. 清理footer的无效定位属性 #

/* 删掉.footer-cont的absolute定位相关属性，保留宽100%即可 */
.footer-cont {
  width: 100%;
}

/* 删掉.footer1、.footer2里的position: relative和top: 200px */
.footer1,
.footer2 {
  font-size: 15px;
  background-color: #d6d8da49;
  color: #8a8686;
  border-bottom: 1px solid rgba(155, 155, 155, 0.267);
}

/* 给.footer2加弹性布局，左右分列放链接，删掉.footer3的硬定位 */
.footer2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.footer2 a {
  display: inline-block;
  text-decoration: none;
  padding: 12px;
  font-size: 14px;
}
.footer3 a {
  font-size: 14px;
  padding: 14px;
  text-decoration: none;
  color: #8a868683;
}

4. 调整footer HTML结构 #

把.footer3放到.footer2内部，和左侧的.a-li左右并列：

<footer>
  <div class="footer-cont">
    <div class="footer1">
      <span class="f1">Colombia</span>
    </div>
    <div class="footer2">
      <div class="a-li">
        <a href="">About</a>
        <a href="">Advertising</a>
        <a href="">Business</a>
        <a href="">How Search works</a>
      </div>
      <!-- 把footer3移到此处 -->
      <div class="footer3">
        <a href="">Privacy</a>
        <a href="">Terms</a>
        <a href="">Settings</a>
      </div>
    </div>
  </div>
</footer>

修改后footer会始终固定在视口底部，当页面内容高度超过视口时，footer会跟随内容下沉到页面最底部，不会出现溢出或内容重叠问题。

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