窗口分辨率低于1000px时height:100vh失效问题求助

核心问题排查 #

• 媒体查询阈值不匹配：你需求是窗口宽度低于1000px时生效，但代码里写的是@media (max-width: 1400px)，阈值完全不符。
• CSS优先级覆盖：媒体查询的样式写在普通#child样式之前，导致后面的height: 30%直接覆盖了媒体查询中的height: 100vh。
• 容器溢出问题：#child设置了margin: 20px，直接用100vh会让元素总高度超出父容器范围，导致视觉上看起来“不生效”。

修正后的代码 #

#father {
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  text-align: center;
  padding: 20px; /* 将子元素的上下margin转移到父容器padding，避免溢出 */
  box-sizing: border-box; /* 确保padding不增加父容器整体尺寸 */
}

#child {
  background-color: #f2f2f2;
  border: 1px solid #ddd;
  margin: 0 auto; /* 仅保留左右居中的margin */
  padding: 10px;
  width: 60%;
  height: 30%;
  text-align: center;
  cursor: auto;
}

/* 将媒体查询放在普通样式之后，确保优先级 */
@media (max-width: 999px) {
  #child {
    height: calc(100vh - 40px); /* 减去父容器上下padding的总高度 */
  }
}

<div id="father">
  <div id="child">test</div>
</div>

关键调整说明 #

1. 把媒体查询的宽度阈值改为max-width: 999px，精准匹配“窗口低于1000px”的触发条件。
2. 调整CSS代码顺序，让媒体查询样式在普通样式之后，确保媒体查询的规则能覆盖默认设置。
3. 通过父容器padding替代子元素的上下margin，结合box-sizing: border-box避免子元素高度超出可视区域；如果必须保留子元素的margin，直接用calc(100vh - 40px)抵消上下margin的影响即可。

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