响应式菜单开发问题：nav/ul切换display为block后超出body

问题现象 #

开发响应式菜单栏时，将nav ul元素的display属性从flex切换为block后，该元素会超出body范围；但增加header的高度后，元素就会回到body内部。

截图说明：切换为block后的ul（绿色边框）部分溢出了红色边框的body区域，布局出现异常。

相关代码 #

CSS代码

:root {
  --main-color: #ff702a;
  --bg-color: #1e1c2a;
  --big-font: 4rem;
}

* {
  margin: 0;
  padding: 0;
  border: 1px red solid;
}

header,
ul {
  border: 1px green solid;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header {
  padding: 0 4rem;
  height: 5rem;
}

header .logo {
  font-size: 2rem;
  color: var(--main-color);
  font-weight: bolder;
}

.bx.bx-menu {
  display: none;
}

nav ul li {
  margin: 1rem;
  list-style: none;
}

@media(max-width: 425px) {
  header nav ul {
    display: block;
  }
}

HTML代码

<body>
  <header>
    <a href="#" class="logo">FOODIES</a>
    <i class='bx bx-menu' style='color:#ffffff'></i>
    <nav>
      <ul class="nav-menu">
        <li>Home</li>
        <li>About</li>
        <li>Menu</li>
        <li>Service</li>
        <li>Contact</li>
      </ul>
    </nav>
  </header>
</body>

问题原因 #

• header设置了固定高度height:5rem，且默认是flex布局，align-items:center让子元素垂直居中。
• 当ul从flex（横向布局，高度由行高/对齐方式决定）切换为block后，它的高度会被内部5个带margin:1rem的li完全撑开，总高度远大于header的固定高度。
• 由于header高度固定，无法容纳block状态的ul，导致ul溢出header，进而超出body范围；增加header高度后，空间足够容纳ul，溢出问题自然消失。

解决方案 #

方案1：移除header固定高度，让高度自适应

这是最合理的方案，让header根据内部元素高度自动调整，适配不同布局状态：

header {
  padding: 0 4rem;
  /* height: 5rem; 注释或删除此行 */
  min-height: 5rem; /* 可选：保留最小高度，保证桌面端头部不会过矮 */
}

方案2：响应式中调整header的垂直对齐方式

在移动端布局时，修改header的align-items为flex-start，避免垂直居中导致的溢出，同时可增加内边距优化布局：

@media(max-width: 425px) {
  header {
    align-items: flex-start;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  header nav ul {
    display: block;
  }
}

方案3：给header添加溢出处理（应急方案）

如果必须保留header固定高度，可让内部溢出时出现滚动条，但会影响用户体验，仅作临时解决：

header {
  padding: 0 4rem;
  height: 5rem;
  overflow: auto;
}

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