制作谷歌克隆页时如何让footer固定在视口底部且无页面溢出

问题根因 #

你的页面溢出和footer定位失效是三个核心问题导致的：

1. 页面根容器没有采用弹性布局撑开高度，导致absolute定位的footer会和主体内容重叠
2. footer使用width: 100vw，在默认出现纵向滚动条的场景下，100vw会包含滚动条宽度，导致横向溢出
3. 页脚内部的.top-footer/.bottom-footer额外设置了top: 200px的偏移，导致页脚自身高度异常溢出视口

修复方案 #

按以下步骤修改对应CSS代码即可实现效果：

• 第一步：修改全局、html、body的基础配置，给body启用flex纵向布局

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 新增，避免内边距撑大元素宽度 */
}
  
html{
    height: 100%;
}
body {
    font-family: Arial, sans-serif;
    min-height: 100vh; /* 占满视口高度 */
    display: flex;
    flex-direction: column; /* 子元素纵向排列 */
}

• 第二步：给main元素设置flex占比，自动撑开剩余高度，把footer挤到页面底部

main {
    flex: 1; /* 新增，占满header和footer之外的所有剩余空间 */
}

• 第三步：删除页脚相关的冗余定位，修复横向溢出

/* 删除原来的.top-footer, .bottom-footer里的top:200px属性 */
.top-footer,
.bottom-footer {
    font-size: 15px;
    background-color: #d6d8da49;
    color: #8a8686;
}

/* 把footer的100vw改成100%，删掉多余的relative定位 */
footer{
    width: 100%;
}

/* 删掉.footer-cont里的position:absolute、bottom:0、left:0属性，不需要绝对定位了 */
.footer-cont {
    width: 100%;
    height: fit-content;
    height: -moz-fit-content;
}

修改后footer会默认固定在视口底部，当页面内容超过视口高度时，会跟随内容滚动到页面最底部，不会和主体内容重叠，也不会出现横向溢出问题。

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