CSS布局异常导致页脚遮挡日历、页面无法滚动问题求助

问题根因 #

你页面无法滚动、页脚覆盖日历的核心问题是：绝大多数容器都使用了position: fixed固定定位，固定定位的元素会完全脱离正常文档流，浏览器不会把这些元素的内容高度计入页面整体高度，自然无法触发滚动；同时后声明的固定定位元素默认层叠顺序更高，你的页脚在HTML结构中位于lab-content之后，所以默认会显示在日历上层。
你之前移除页脚的position: fixed后页脚跑到顶部，也是因为其他所有内容都是脱离文档流的固定定位元素，页面里只剩页脚属于正常文档流，没有其他内容撑出高度，它自然会出现在页面最顶部。

修复方案 #

1. 调整全局基础样式 #

给body添加内边距，为固定的头部、侧边栏、页脚让出空间，避免内容被遮挡：

body {
  line-height: 1.5;
  padding: 150px 0 60px 200px; /* 顶部150px对应header高度，左侧200px对应侧边栏宽度，底部60px对应页脚高度 */
  margin: 0;
  background-color: silver;
}

2. 移除不必要的固定定位 #

删除.lab-content、.summary、.biobox、.summarybox的position: fixed属性以及配套的top/left/bottom/right定位属性，让这些内容回归正常文档流，页面高度会随内容自动撑开，自然就能滚动：

/* 修改后的lab-content示例 */
.lab-content {
  background-color: silver;
  margin-top: 0;
}

/* summary、biobox、summarybox同理删除position: fixed及相关定位属性，根据布局需求调整宽度、边距即可 */

3. 可选调整（按需选择） #

• 如果你需要保留页脚固定在视口底部：保留.footer的position: fixed属性，给它添加z-index: 10;避免被其他内容覆盖，同时上面给body加的底部内边距已经可以避免内容被页脚遮挡。
• 如果你不需要固定页脚：直接删除.footer的position: fixed以及配套的left/right/bottom属性，页脚会自动跟随在页面内容的最底部。
• 如果需要调整日历和页脚的层叠顺序：给.lab-content添加z-index: 20;，给.footer添加z-index: 10;，就能保证日历显示在页脚上层。

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