为body元素设置padding-bottom样式未正常生效问题

你设置的body { padding-bottom: 500px; }没产生可滚动的底部空间，核心原因是当前页面内body的唯一子元素是设置了position: fixed的header。固定定位元素会完全脱离正常文档流，在部分浏览器的默认渲染逻辑下，没有普通流内容撑开的body，其底部内边距不会被纳入页面可滚动区域的计算范围，自然看不到预留空间的效果。

二选一即可实现底部预留操作空间的需求：

• 方案一：直接给根元素<html>添加对应高度的底部内边距，适配性最稳定

html {
  padding-bottom: 500px;
}
body {
  margin: 0;
}

• 方案二：给body设置最小视口高度，强制让内边距纳入滚动计算范围

body {
  margin: 0;
  padding-bottom: 500px;
  min-height: 100vh;
  box-sizing: border-box;
}

添加box-sizing: border-box是为了避免底部padding叠加在100vh高度外，产生不必要的多余滚动条。

补充提示：你的header是固定在顶部的定位，后续往页面添加正常流的内容时，记得给最外层内容块加60px的顶部内边距/外边距，避免开头内容被固定导航栏遮挡。

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