小屏幕下带遮罩层的图片Div无法设置合适高度的问题

你的代码存在两个核心问题：

• .overlay采用绝对定位，不占据文档流空间，导致.homepage-top-image-wrapper的高度仅由min-height:100vh决定，无法被内部内容撑开。
• .image和.overlay的height:100%仅匹配父元素的初始高度（100vh），当内容超出该高度时，背景图和遮罩层不会自动延伸，文本直接溢出。

修改后的代码 #

CSS

.homepage-top-image-wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.homepage-top-image-wrapper .image {
  position: absolute;
  inset: 0; /* 替代top/left/width/height，覆盖整个父元素 */
  min-height: 100%; /* 确保至少和父元素同高 */
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0; /* 置于内容层下方 */
}

.homepage-top-image-wrapper .overlay {
  position: relative; /* 改为相对定位，占据文档流空间 */
  z-index: 1; /* 确保内容在背景图上方 */
  width: 100%;
  min-height: 100vh; /* 和父元素保持一致的最小高度 */
  background-color: rgba(0, 0, 0, 0.5);
}

.home-content-block {
  max-width: 1100px;
  color: blue;
  margin: 0 auto; /* 可选：让内容居中 */
  padding: 2rem; /* 可选：添加内边距，避免贴边 */
}

HTML

<div class="homepage-top-image-wrapper">
  <div class="image" style="background-image: url('https://t4.ftcdn.net/jpg/03/17/72/47/360_F_317724775_qHtWjnT8YbRdFNIuq5PWsSYypRhOmalS.jpg');"></div>
  <div class="overlay">
    <div class="home-content-block">        
      <div class="home-content-subtitle" style="font-size:5rem">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </div>          
  </div>        
</div>

关键改动说明 #

1. .overlay改为相对定位：让它成为文档流的一部分，内部内容的高度会直接撑开.overlay和父容器.homepage-top-image-wrapper，当内容超过100vh时，容器高度自动适应。
2. .image使用inset:0和min-height:100%：确保背景图始终覆盖整个父容器，无论父容器高度是100vh还是被内容撑高后的高度。
3. 添加层级控制：通过z-index明确背景图和内容层的层级关系，避免内容被背景图遮挡。

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