本文介绍利用 CSS Grid 布局与 calc() 函数，结合内容实际高度动态计算容器子元素高度，从而实现“刚好滚动至完全隐藏”的视觉效果，无需 JavaScript，纯 CSS 可解。
本文介绍利用 css grid 布局与 `calc()` 函数，结合内容实际高度动态计算容器子元素高度，从而实现“刚好滚动至完全隐藏”的视觉效果，无需 javascript，纯 css 可解。
在实现“滚动后元素完全隐出视口顶部”这类交互动效时，关键在于让可滚动容器的子内容区域（.content）拥有足够但不过量的高度——既要确保其自然高度（max-content）被完整包含，又要额外预留空间（如父容器内边距、视口高度等），使用户滚动到底部时，内容最后一像素恰好与容器顶部对齐。
传统方案（如固定 height: 200px 或 max-height）无法适配动态内容长度；而 calc(parent_padding_top + max-content + 100vh) 中的 max-content 无法直接用于 calc()（CSS 不支持 max-content 在 calc() 内参与运算）。此时，CSS Grid 提供了突破性解法：当父容器设为 display: grid 后，子元素的百分比高度（如 height: 200%）将相对于网格容器的内容高度（即子元素自身渲染后的自然高度）计算，而非父容器的块级高度。
以下是推荐实现：
.section {
background-color: red;
display: grid; /* 启用 Grid 布局，激活子元素百分比高度的 content-relative 计算 */
width: 200px;
padding: 20px; /* 上下 padding 共 40px，需在子元素高度中补偿 */
overflow: auto; /* 启用滚动，auto 更健壮（兼容 x/y 方向） */
}
.content {
background-color: transparent;
height: calc(200% + 40px); /* 200% = 2 × 自身内容高度；+40px 补齐上下 padding */
}<div class="section">
<div class="content">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text...</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill7644" title="Wjs Localizing Video"><img
src="https://img.php.cn/upload/skill/000/000/081/179161038881467.jpg" alt="Wjs Localizing Video" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill7644" title="Wjs Localizing Video">Wjs Localizing Video</a>
<p>用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...</p>
</div>
<a href="/xiazai/skill7644" title="Wjs Localizing Video" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
</div>✅ 原理说明：
-
.section作为 grid 容器，其行高由.content的固有内容高度（min-content）决定； -
.content设置height: calc(200% + 40px)时，200%即2 × .content 自身内容高度，相当于在原始内容高度基础上再叠加一份； -
+40px精确抵消父容器padding: 20px带来的上下内边距空间，确保滚动距离严格对应内容可视区域变化。
⚠️ 注意事项：
- 必须移除
.section上所有显式height/min-height/max-height声明，否则会干扰 Grid 的自动尺寸计算； - 若
.section存在其他子元素，需通过grid-template-rows显式控制，避免布局冲突； - 此方案兼容现代浏览器（Chrome 66+、Firefox 63+、Safari 16.4+），不支持 IE；
- 如需更精细控制（如动态响应内容变化），可配合
ResizeObserver进行 JS 辅助，但绝大多数场景纯 CSS 已足够。
通过这一技巧，你无需预估文本长度，也无需监听滚动事件，即可实现“滚动即隐藏”的精准动效，兼顾性能与语义化。
