网页添加页脚后底部出现滚动条、双页脚错位显示问题求助

问题根因 #

• 两个页脚标签均设置了position: absolute; bottom: 0属性，会重叠在底部同一位置，无法实现上下堆叠效果
• 绝对定位元素未设置左侧对齐基准，且浏览器默认给body添加了外边距，搭配width: 100%属性会导致元素宽度超出视口，触发横向滚动条
• 外层父容器未做定位约束，子元素绝对定位时会相对根元素计算位置，容易出现偏移问题

修复代码 #

<!-- 建议先给页面body添加全局样式消除默认边距：body { margin: 0; padding: 0; } -->
<div style="position: absolute; bottom: 0; left: 0; width: 100%;">
    <p id="Footer" style="color: #ADD8E6; background-color: red; font-size: 28px; text-align: center; margin: 0; padding: 12px 0;">
        Delicious no-frill meals, all custom-selected for your specific calorie goal, delivered to your inbox weekly.
    </p>
    <p id="Copyright" style="color: #000000; background-color: white; text-align: center; margin: 0; padding: 8px 0;">
        © 2021 Souheil Tawil
    </p>
</div>

修改说明 #

• 把原来两个p标签上的定位、底部对齐、宽度属性移除，改为给外层div添加position: absolute; bottom: 0; left: 0; width: 100%;，父容器整体固定在视口底部，内部p标签遵循正常文档流自然上下堆叠，不会重叠
• 给p标签添加margin: 0消除默认外边距，可按需调整内边距数值控制页脚的上下留白，避免高度异常
• 新增left: 0属性确保页脚从视口最左侧开始排布，配合body全局默认边距重置，彻底解决横向滚动条问题
• 若需要页脚跟随页面内容排布在整站底部而非悬浮在视口底部，只需把外层div的position: absolute改为position: relative，同时给页面主体内容添加对应高度的padding-bottom避免内容被页脚遮挡即可

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