如何设置与屏幕高度一致的段落间距实现假收尾视觉效果？

这个设计想法挺巧妙的，能给读者带来小惊喜！要实现这种适配不同设备屏幕高度的间距，其实用CSS的视口单位就能轻松搞定，不用复杂的JS计算。下面给你两种实用的方案：

方案一：用独立容器实现间距 #

在段落A的后面添加一个空的容器元素，然后给它设置等于视口高度的高度：

HTML 代码 #

<p class="paragraph-a">这是段落A的内容，读完这里你会以为文章结束了...</p>
<div class="full-height-gap"></div>
<p>这是藏在屏幕下方的下一段内容，滚动一点就能看到啦！</p>

CSS 代码 #

.full-height-gap {
  /* 动态视口高度，自动排除浏览器地址栏/底部导航栏，适配移动端 */
  height: 100dvh;
}

/* 可选：给页面添加平滑滚动，提升体验 */
html {
  scroll-behavior: smooth;
}

方案二：用伪元素实现（无需额外HTML） #

如果不想添加多余的DOM元素，可以用段落A的伪元素来生成这个间距，更简洁：

HTML 代码 #

<p class="paragraph-a">这是段落A的内容，读完这里你会以为文章结束了...</p>
<p>这是藏在屏幕下方的下一段内容，滚动一点就能看到啦！</p>

CSS 代码 #

.paragraph-a::after {
  content: '';
  /* 必须设置为块级元素才能占据高度 */
  display: block;
  /* 动态视口高度，适配所有设备 */
  height: 100dvh;
  /* 避免和段落本身的margin叠加，可根据需要调整 */
  margin-top: 0;
}

关键细节说明 #

• 为什么用100dvh而不是100vh？
  传统的100vh会把浏览器的地址栏、底部导航栏也算进高度里，导致在移动端实际可视区域会被这些UI遮挡，而100dvh是动态视口高度，会自动排除这些浏览器UI，保证间距刚好等于当前用户能看到的屏幕高度，适配性更好。目前主流浏览器（Chrome、Firefox、Safari 15.4+、iOS Safari）都支持dvh单位。
• 兼容旧浏览器：如果需要兼容非常旧的浏览器，可以降级使用100vh，或者用JS计算当前视口高度并设置给间距元素，但dvh已经能覆盖绝大多数现代设备了。
• 避免间距叠加：如果段落A本身有margin-bottom，记得把它去掉或者调整，防止和我们设置的间距叠加，影响效果。

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