调整浏览器大小时Footer div与上方div重叠问题排查咨询

问题排查结果 #

1. .grid-item的height: 2px配置错误，远低于内部文本所需高度，会导致内容溢出、黑条遮挡文字的异常表现
2. grid-column-gap: -40px为无效配置，网格间距属性不支持负数值，可通过调整子元素宽度或外边距实现紧缩效果
3. 屏幕宽度小于994px时，.staff-box被强制设置了固定高度90vh，网格内容高度超过该值时会溢出容器，遮挡下方页脚
4. 冗余代码：.grid-container重复声明了两次position: relative，可删除其中一条

修复后CSS代码 #

.main-flex-box {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  text-align: center;
  background-color: white;
  border-radius: 20px;
  margin-top: -40px;
  line-height: 30px;
}

.main-text-flex {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 750px;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

.staff-box {
  margin-top: 40px;
  flex-direction: column;
  border-radius: 20px;
  position: relative;
  display: flex;
  min-height: 90vh;
  width: 100%;
  background-color: #f2f2f2;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 40px; /* 新增底部内边距，避免内容贴边 */
}

.grid-container {
  display: grid;
  position: relative;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  min-height: 400px;
  text-align: center;
  margin-top:50px;
  grid-column-gap: 20px; /* 改为有效值，可按需调整大小 */
  grid-row-gap: 100px;
}

.grid-item {
  /* 删除错误的height:2px和background-color:black配置 */
  display: block;
  width: 80%;
  font-weight: normal;
  position: relative;
  font-size: 1rem;
  margin-left: auto;
  margin-right: auto;
}
/* 若需要保留顶部黑条效果，新增伪类实现 */
.grid-item::before {
  content: '';
  display: block;
  height: 2px;
  width: 100%;
  background-color: #000;
  margin-bottom: 15px;
}

@media all and (max-width: 1025px) {
  .main-flex-box {
    width: 100%;
    height: auto;
  }
  .home-text {
    font-size: 1.1rem;
  }
  .socials {
    display: none;
  }
  img {
    max-width: 325px;
  }
}

@media all and (max-width: 994px) {
  .grid-container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    width: 100%;
    grid-row-gap: 175px;
  }
  .staff-box {
    /* 删除固定高度height:90vh，保留min-height即可适配内容高度 */
    width: 100%;
  }
}

@media all and (max-width: 580px) {
  .grid-container {
    grid-template-columns: 1fr;
 }
}

@media all and (max-width: 414px) {
  .grid-container {
    margin-top: -50px;
  }
  .grid-item {
    margin-top: 90px;
  }
}

@media all and (max-width: 645px) {
  .staff-flex-box{
  margin-top: 150px;
}
}

补充说明 #

如果原本不需要每个人员卡片顶部的2px黑条，直接删除.grid-item::before对应的样式规则即可。修复后.staff-box会根据网格内容自动适配高度，不会再遮挡下方页脚。

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