浏览器缩小时含p/a元素的Div子元素无法占满100%高度问题

问题原因 #

1. height:100%是依赖父元素高度的相对值，若html、body未设置明确高度，.menu-container的height:100%仅能取到当前视口高度，当内部<p>元素总高度超过视口时，body会被内容撑开，导致.menu-container高度不足，露出body背景。
2. <p>元素默认带有margin，可能导致容器内部出现额外间距，视觉上看起来未占满高度。

修复方案 #

步骤1：重置基础样式并修改容器高度单位 #

给html、body清零默认边距，同时将.menu-container的height:100%替换为min-height:100vh（vh为视口高度单位，确保容器至少覆盖整个视口，内容溢出时自动撑开）。

步骤2：优化flex子元素布局 #

去掉.menu-item1的height:100%，利用flex布局的align-items:stretch特性让子元素自动占满父容器高度；同时清零<p>元素的默认margin，避免额外间距。

修改后的完整代码 #

<div class="menu-container">
  <div class="menu-item1">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
  </div>
</div>

html, body {
  margin: 0;
  padding: 0;
  background-color: black;
}

.menu-container {
  min-height: 100vh;
  background-color: red;
  color: white;
  display: flex;
  align-items: stretch;
  width: 100%;
  position: absolute;
  z-index: 100;
}

.menu-item1 {
  margin-left: 20px;
  width: 15%;
  background: dodgerblue;
}

.menu-item1 p {
  margin: 0;
}

额外优化（若需要<p>元素均分高度） #

如果希望每个<p>元素自动均分.menu-item1的高度，给.menu-item1添加flex垂直布局：

.menu-item1 {
  margin-left: 20px;
  width: 15%;
  background: dodgerblue;
  display: flex;
  flex-direction: column;
}

.menu-item1 p {
  margin: 0;
  flex: 1;
}

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