为何将banner内容用div包裹并设100vh可实现背景全屏覆盖

问题解决的技术原理 #

核心是CSS元素高度自适应规则、百分比padding计算逻辑、背景绘制范围三个特性共同作用的结果：

1. 初始状态缩小页面背景显示不全的原因
   最初未给banner设置固定高度时，banner的高度由内部内容高度 + 上下8%的padding共同决定。CSS规则中百分比单位的padding是基于父元素宽度计算的，页面缩小的时候父元素宽度变小，上下padding对应的像素值同步缩小；同时banner内的文本因容器宽度变窄大量换行，内容高度大幅升高，此时banner的总高度无法适配内容高度，内容溢出banner盒区域，而背景仅覆盖banner本身的盒区域，就会出现下半部分无背景的问题。
2. 给banner设置height:100vh后放大页面异常的原因
   100vh是相对于当前视口高度的固定单位，给banner设置该属性后，banner的内容区高度被固定为视口高度，不会随内部内容高度变化。当你放大页面时，页面缩放比升高，所有CSS元素的物理渲染尺寸变大，内部文本换行增多、总高度超过banner的固定高度，内容溢出banner盒区域，同样会出现下半部分无背景的问题。
3. 将height:100vh移到子元素后显示正常的原因
   父元素banner的高度默认是auto，会完全自适应内部子元素的总高度。你把高度设置转移到子元素banner-content后：

• banner-content作为内部内容的容器，固定占100vh高度，保证最小高度适配视口
• 父元素banner的高度会自动计算为「上下8%padding的高度 + banner-content的高度」，完全贴合内部总高度
• 无论页面缩放导致内部内容高度如何变化，banner的高度都会同步适配，背景图始终覆盖整个banner的盒区域，不会出现显示不全的问题。

相关代码参考

<!-- HTML -->
<section class="banner">
  <div class="banner-content">
    <span class="text_banner_welcome">"Hello! A Great Horse Runners</span>
    <h1 class="title_of_banner">
      GREAT RUNNERS <br />
      GLOBAL HORSE RACE <br />
      2022
    </h1>
    <p class="description_of_banner">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit,
      harum cupiditate, assumenda commodi placeat corrupti culpa natus ex
      ea nesciunt dignissimos expedita nihil sit, autem consequatur
      aliquam ipsa ipsam. Voluptate!
    </p>
    <h3 class="date_of_banner">2022.11. 33(SAT) ~ 34(SUN)</h3>
    <span class="location_of_banner"
      >@ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil,
      omnis!</span
    >
  </div>
</section>

/* CSS */
.banner {
  padding: 8% 12%;
  background-image: url("https://theplaidhorse.s3.amazonaws.com/media/uploads/2020/08/AdobeStock_326500445-1-768x512.jpeg");
  background-size: cover;
  position: static;
  background-repeat: no-repeat;
}

.banner-content {
  height: 100vh;
}

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