全屏视口高度Hero区域溢出问题求助

核心问题出在你对Hero高度的设置逻辑上，以下是具体解决思路和代码示例：

正确的Hero高度设置 #

放弃固定的height:100vh，改用min-height:100vh——这个属性会让Hero至少占满整个视口高度，当内容超过视口高度时，Hero会自动拉伸高度来包裹内容，而不是截断内容导致溢出到下方元素区域。

如果需要适配移动端和带滚动条的浏览器场景，推荐用min-height:100dvh（动态视口高度），它会自动排除浏览器UI（比如移动端的地址栏）的高度影响。

修复下方元素的布局 #

不需要给下方div设置top:100vh，只要让它保持正常的文档流，自然会跟在Hero的底部。如果之前给元素加了absolute/fixed定位，要移除这些属性，回到静态定位。

完整示例代码 #

<div class="hero">
  <!-- 这里放你的Hero内容，即使内容很长也会自动撑开Hero高度 -->
  <h1>Hero标题</h1>
  <p>大量的Hero描述内容...大量的Hero描述内容...大量的Hero描述内容...大量的Hero描述内容...大量的Hero描述内容...大量的Hero描述内容...大量的Hero描述内容...大量的Hero描述内容...大量的Hero描述内容...大量的Hero描述内容...大量的Hero描述内容...大量的Hero描述内容...</p>
</div>
<div class="content">
  <h2>下方内容区域</h2>
  <p>这部分内容会自动出现在Hero的下方，不会被溢出的Hero内容覆盖</p>
</div>

/* 全局重置，避免默认边距干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hero {
  min-height: 100dvh; /* 关键：最小高度适配视口，内容溢出时自动增高 */
  padding: 2rem;
  background: #f0f0f0;
}

.content {
  padding: 2rem;
  background: #fff;
}

额外注意事项 #

如果Hero内部有浮动元素，可能会导致Hero高度无法正确包裹内容，这时候需要添加清除浮动的样式：

.hero::after {
  content: "";
  display: table;
  clear: both;
}

为什么你之前的方法无效：

• height:100vh：固定死Hero高度，内容超出时只会在Hero内部溢出，下方元素会被Hero的溢出内容覆盖
• top:100vh：这个定位是基于视口底部，而不是Hero的实际底部，当Hero高度超过100vh时，下方元素会被Hero的额外高度部分覆盖

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