Main区块无法撑满页面高度导致Footer无法固定在底部

你的问题核心是没有让body和main占据足够的页面高度，同时fixed定位的header会遮挡main内容，导致布局错位。以下是针对性修改方案：

关键修改点 #

• 给html和body设置100%高度，并将body设为垂直方向的flex容器，让子元素自动分配空间
• 给main添加flex: 1，使其占据header和footer之外的所有剩余空间
• 给main设置padding-top，避开fixed的header，防止内容被遮挡

修改后的CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%; /* 让根元素占满视口高度 */
}

body {
  font-family: "Helvetica Neue", sans-serif;
  display: flex; /* 启用flex布局 */
  flex-direction: column; /* 垂直排列子元素 */
}

header {
  height: 60px;
  background-color: rgba(255, 255, 255, 0.723);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 100px 0px 120px;
  color: gray;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 100;
}

main {
  flex: 1; /* 自动填充剩余空间 */
  padding-top: 60px; /* 避开fixed的header高度，防止内容被遮挡 */
}

.expgrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 50px;
  column-gap: 20px;
  row-gap: 50px;
}

.exp {
  width: fit-content;
  position: relative;
  margin: auto;
}

footer {
  width: 100%;
  height: 75px;
  background-color: #29292c;
}

方案说明 #

• 当body作为flex容器时，flex:1的main会自动拉伸：内容不足时占满header和footer之间的空间，内容超出视口时，footer会跟随内容到页面最底部（而非悬浮固定），这是标准的sticky footer效果
• 新增的padding-top解决了fixed header遮挡main内容的问题
• HTML结构无需修改，保持原有语义化层级即可

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