Div设height:100%且距顶部20%，无法随内容扩展求解

你的核心问题出在给绝对定位的.mainContent设置了height: 100%——这个属性会把容器高度固定为它的包含块（这里是浏览器视口）的高度。当内部内容超过视口高度时，容器无法自动扩展，导致内容溢出到容器之外。

解决方案步骤 #

• 移除height: 100%，让容器高度由内部内容自动决定
• 添加min-height: 80vh，确保当内容较少时，容器至少从页面顶部20%的位置延伸到底部（80vh代表视口高度的80%，刚好对应top:20%后剩余的空间）
• 顺便修正代码里的小错误：<div id="commonGuides" style="commonGuides">应该改为class="commonGuides"，原写法的style属性值无效

修改后的完整代码 #

CSS

.mainContent {
  background-color: rgb(220, 220, 220);
  width: 100%;
  position: absolute;
  top: 20%;
  margin: 0 auto;
  text-align: center;
  min-height: 80vh; /* 确保内容不足时的最小高度 */
}

HTML

<div id="mainContent" class="mainContent">
  <div id="mainContentText" class="mainContentText">
    <h1> guides </h1>
    <h2> Here are some guides ya fool.</h2>
  </div>
  <div id="commonGuides" class="commonGuides">
    <h3>Here they are:</h3>
    <h3>Here they are:</h3>
    <h3>Here they are:</h3>
    <h3>Here they are:</h3>
    <h3>Comin' up!</h3>
    <h3>Comin' up!</h3>
    <h3>Comin' up!</h3>
    <h3>Comin' up!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>The guides were a lie.</h3>
  </div>
</div>

效果说明 #

这样设置后，当内容较少时，min-height:80vh会让容器刚好填满从顶部20%到底部的空间；当内容超过这个高度时，容器会自动扩展高度以容纳所有内容，完全避免了溢出问题。

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