不同设备尺寸下header下方区块重叠覆盖header的布局问题求助

DevOps 小满

2026-9-26

布局重叠问题解决方案

根因分析

.navigation-menu使用position: fixed定位，脱离普通文档流，不占用父级header的高度空间
内部.heading__container设置了100vh高度，默认从视口顶部开始排版，顶部被固定导航栏遮挡的同时，整体高度超出header设置的100vh限制，内容溢出header区域，与下方区块发生重叠
额外存在两个关联问题：
- .navigation-menu设置width: 100%加左右20px内边距，默认盒模型下实际宽度超出视口，会出现横向滚动条
- 社交按钮区域使用浮动布局，未清除浮动会导致父级高度计算异常，加剧内容溢出问题

修复代码

/* 全局盒模型预设，避免宽高计算异常，推荐全局添加 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  margin: auto;
  height: 100vh;
}
.navigation-menu {
  z-index: 10000;
  display: flex;
  align-items: center;
  background: #fff;
  box-shadow: 0 1px 1px #333;
  justify-content: space-between;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  padding: 20px 20px;
  /* 内边距计入宽度，解决横向滚动条问题 */
  box-sizing: border-box;
}

/* ===== 中间原有导航、汉堡菜单代码保持不变 ===== */

.heading__container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* 减去导航栏高度，同时增加顶部内边距避开固定导航 */
  height: calc(100vh - 80px);
  padding-top: 80px;
}

.h__wrapper  {
  margin-top: 50px;
  /* 清除浮动，解决高度塌陷 */
  overflow: hidden;
}