固定定位页脚下方出现内容问题求助

嘿，我明白你的问题了——固定定位的页脚虽然能一直显示在屏幕底部，但因为它脱离了正常的文档流，页面的帖子内容不会自动为它留出空间，所以就会跑到页脚下面去。咱们来一步步修复这个问题，同时满足你红色背景的预期：

第一步：调整页脚CSS，解决宽度溢出+设置红色背景 #

你的原CSS里width:100%加上左边40px的margin，会导致页脚超出视口产生横向滚动条，同时把背景色改成你要的红色：

#contactLinks { 
  position: fixed; 
  left: 0; 
  bottom: 0; 
  margin: 35px 0 35px 40px; 
  background-color: #ff0000; /* 替换为预期的红色背景 */
  width: calc(100% - 40px); /* 抵消左边40px的margin，避免页脚溢出屏幕 */
  box-sizing: border-box; /* 确保内边距不会额外增加宽度 */
  padding: 10px 0; /* 可选，给链接留点上下空间，提升视觉效果 */
}

#contactLinks a { 
  color: #808080; 
  text-decoration: none; 
  margin: 0 30px 0 0; 
}

第二步：给页面内容添加底部内边距，避免被页脚覆盖 #

因为固定页脚脱离了文档流，我们需要手动给页面的主内容容器（比如body或者你的帖子专属容器）添加底部内边距，值等于页脚的总占用高度（上下margin + 页脚自身高度 + 内边距）：

/* 假设页脚自身高度（含padding）是60px，加上上下35px的margin，总占用高度为 35+60+35=130px */
body {
  padding-bottom: 130px; /* 根据你的页脚实际高度调整这个数值 */
}

原理说明 #

• position: fixed会让元素脱离文档流，不再占据页面空间，所以内容会自然延伸到它下方。通过给内容加padding-bottom，相当于给页脚预留出了专属位置，内容就不会被覆盖了。
• calc(100% - 40px)是为了修正页脚的宽度，避免左边的40px margin导致页脚超出屏幕右侧。

这样调整后，你的页脚会一直固定在屏幕底部（红色背景），同时帖子内容会停在页脚上方，完全符合你的预期啦！

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