如何设置Div高度，使其滚动后可完全隐藏于顶部？

要让滚动容器内的内容能完全隐藏在顶部上方，且滚动条没有多余的滚动空间，你可以通过调整内容容器的外边距来实现，核心是让容器的可滚动总高度刚好匹配「内容高度 + 容器可视高度」，这样滚动到底部时内容会完全移出可视区域。

修改后的完整代码： #

CSS

.section {
  box-sizing: border-box; /* 让height包含padding，简化计算 */
  background-color: red;
  height: 200px;
  width: 200px;
  padding: 20px;
  overflow: scroll;
}

.content {
  display: block;
  background-color: transparent;
  margin-bottom: 100%; /* 关键：添加与容器高度相等的底部外边距 */
}

HTML

<div class="section">
  <div class="content">
    <p>与普遍认知不同，Lorem Ipsum并非纯粹的随机文本。它源自公元前45年的经典拉丁文学，距今已有2000多年历史。弗吉尼亚州Hampden-Sydney学院的拉丁语教授Richard McClintock，从Lorem Ipsum段落中找出一个生僻的拉丁词"consectetur"，查阅该词在古典文献中的引用后，发现了其确凿的来源。Lorem Ipsum出自西塞罗于公元前45年撰写的《论善与恶的极限》（de Finibus Bonorum et Malorum）第1.10.32和1.10.33章节。这本书是一篇关于伦理学理论的论文，在文艺复兴时期非常受欢迎。Lorem Ipsum的第一句"Lorem ipsum dolor sit amet.."就来自第1.10.32章节的一行。

以下是自1500年以来一直使用的标准Lorem Ipsum文本片段，供感兴趣的人参考。同时还附上了西塞罗《论善与恶的极限》第1.10.32和1.10.33章节的原始拉丁文，以及H. Rackham在1914年翻译的英文版本。

<b>现在我应该可以继续滚动，直到这段文本完全消失</b></p>
  </div>
</div>

核心逻辑： #

• box-sizing: border-box 确保容器的height值包含内边距，避免因盒模型导致的高度计算偏差；
• margin-bottom: 100% 给内容容器添加一个等于容器高度的底部外边距，使得容器的scrollHeight（可滚动总高度）等于「内容实际高度 + 容器高度」；
• 滚动时，滚动距离刚好等于内容的实际高度，当滚动到底部时，内容会完全移出容器的可视区域，不会出现多余的滚动留白。

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