如何让div保持视口高度，避免垂直收缩至子元素重叠

我需要让页面中的.welcome div始终占满视口高度，直到屏幕垂直高度缩小到子元素即将（或提前一点）发生重叠时，再让div高度自适应内容，避免元素重叠。尝试过min-height和display:table属性，都没达到预期效果。

预期显示效果：

小屏幕实际显示效果：

相关代码片段 #

CSS 代码 #

* {
  margin: 0;
}

body {
  overflow-x: hidden;
  font-size: large;
  margin: 0;
}

.welcome {
  text-align: center;
  background-image: url("https://images.unsplash.com/photo-1587831990711-23ca6441447b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZGVza3RvcCUyMGNvbXB1dGVyfGVufDB8fDB8fA==");
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100%;
  color: white;
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 0 auto;
}

.welcome * {
  clear: both;
}

.welcome-txt {
  position: absolute;
  top: 40%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.welcome-content {
  animation-name: fadeInLoad;
  animation-duration: 3s;
  animation-timing-function: linear;
}

#child {
  position: absolute;
  top: 0;
  color: black;
  display: inline-block;
}

.info-content {
    position: relative;
    top: 83vh;
    text-align: center;
    background-image: url("img_5.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 105%;
    padding: 20px;
    padding-right: 20px;
    clear: both;
    overflow: hidden;
}

.info-content-blocks {
    background-color: rgba(204, 204, 204, 0.8);
    padding: 30px; 
    margin: 15px;
}

.diveder {
width: 100%;
min-height: 100px;
background-color: rgba(204, 204, 204, 0.8);
padding-top: 2%;
padding-bottom: 1%;
}

HTML 代码 #

<div class="welcome">
    <div class="welcome-content">
        <h1 class="welcome-txt">Classes<br>
            The Coders Club</h1>
        <img src="/resources/Copy of The Coders Club.png" class="logo">
        <p class="tagline">Learn. Code. Create.</p>
        <div class="arrow-background">
            <div class="arrow bounce"></div>
        </div>
    </div>  
</div>
 <div class="space"></div>   
<div class="info-content">
   <div class="diveder" style="color: red;"><h2>Class Starts February 10</h2>
    <p>Signup by January 20th</p></div>
    <div class="info-content-blocks" id="classes">
    
    <h3>What Will Be Taught?</h3>
    <h4><b>Beginner Class</b></h4>
    <p>In the beginner class students will be taught the basics of HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets). Students will be able to make websites like the one you are one now.</p>
    <button class="standard-button"><a href="/curriculem-beginer.html">View curriculum</a></button><br><br>
    <button class="standard-button">Enroll</button>
    
    <h4>Intermediate Class Part 1 (New!)</h4>
    <p>In the Intermediate part 1 class students will learn the basics of JS. IE: variables, function, if/else statements, object, object oriented programing. Note: The HTML and CSS is not required for the intermediate class.</p>
    <button class="standard-button">Enroll</button><br><br>
    <button class="standard-button"><a href="/curriculem-beginer.html">View curriculum</a></button><br><br>
</div>

解决方案 #

问题核心在于原代码使用position:absolute脱离文档流，且min-height:100%依赖父元素高度未定义，导致小屏幕下子元素重叠。修改方案如下：

1. 给.welcome设置正确的最小高度：
   用min-height:100vh替代min-height:100%，vh是视口高度单位，直接基于当前屏幕高度计算，无需依赖父元素高度。

2. 调整定位方式，回归文档流：
   移除.welcome的position:absolute和top:0，添加position:relative，让子元素的绝对定位基于.welcome容器，同时保证文档流正常排列，避免下方内容错位。

3. 修正下方内容的定位：
   移除.info-content的top:83vh，改用自然文档流排布，或通过margin-top控制间距。

4. 优化子元素的响应式表现：
   给.welcome-txt添加媒体查询，小屏幕下取消强制不换行，避免元素重叠。

修改后的关键CSS代码 #

html, body {
  height: 100%; /* 确保根元素高度完整 */
}

.welcome {
  text-align: center;
  background-image: url("https://images.unsplash.com/photo-1587831990711-23ca6441447b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZGVza3RvcCUyMGNvbXB1dGVyfGVufDB8fDB8fA==");
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh; /* 最小高度为视口高度 */
  color: white;
  position: relative; /* 作为子元素绝对定位的容器 */
  width: 100%;
  padding: 1rem 0; /* 添加上下内边距，避免内容贴边 */
}

.welcome-txt {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 小屏幕下自动换行，避免元素重叠 */
@media (max-height: 600px) {
  .welcome-txt {
    white-space: normal;
    top: 30%;
  }
}

.info-content {
    position: relative;
    margin-top: 0; /* 移除top定位，用margin控制间距 */
    text-align: center;
    background-image: url("img_5.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box; /* 确保padding不撑开宽度 */
    overflow: hidden;
}

修改后，.welcome会在屏幕高度足够时保持视口高度，当屏幕高度过小导致子元素即将重叠时，容器会自动撑开高度适配内容，同时保证下方内容正常排列。

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