粘性头部不支持动态高度自动适配，需通过css变量配合calc()让后续内容区动态预留空间；关键在于用padding-top: calc(var(--header-height) + 1px)替代固定margin-top，并确保sticky生效前提（如top: 0、无overflow遮挡等）。
粘性头部（position: sticky）本身不支持“动态高度”自动适配内容，但可以通过 calc() 配合 CSS 变量实现视觉和布局上的动态响应。关键不是让 sticky 自己变高，而是让后续内容区域正确腾出空间，并随头部高度变化实时调整。
为什么 sticky 头部高度变化后内容会错位
当头部使用 position: sticky 且高度由内容撑开（比如多行标题、响应式字体），它实际高度可能从 64px 变为 80px，但内容区若写死 margin-top: 64px，就会露出空白或遮挡。浏览器不会自动把 sticky 元素的高度“透传”给后续元素。
用 CSS 变量 + calc() 动态预留内容区顶部空间
核心思路：把头部高度定义为 CSS 变量，内容容器用 padding-top: calc(var(--header-height, 64px) + 1px) —— 这里 +1px 是防抖小技巧，避免因四舍五入导致的 1px 缝隙。
-
--header-height必须在头部元素上显式设置，例如：header { --header-height: 72px; } - 响应式场景下，可在媒体查询中覆盖变量：
@media (max-width: 768px) { header { --header-height: 56px; } } - 不要用
margin-top，它在 flex 或 grid 容器中可能被折叠；padding-top更可靠 - 如果头部高度由 JS 动态计算（如根据 font-size 或行数），可通过
element.style.setProperty('--header-height', height + 'px')注入，但需确保触发时机早于布局计算
sticky 不生效时，calc() 也救不了你
calc() 只管尺寸计算，不管定位是否生效。常见导致 position: sticky 失效的因素必须先排除：
- 父容器设置了
overflow: hidden、auto或scroll—— sticky 依赖滚动祖先，这些属性会切断上下文 - 头部元素是
display: table-row、inline或被transform/filter干扰 —— 浏览器直接降级为static -
top值未设置或为auto—— 必须写成类似top: 0才能触发粘性行为 - 在 iOS Safari 13.x 或旧版 WebView 中，sticky 行为不可靠，此时应降级为
position: fixed并手动管理内容区偏移
fixed 备用方案下如何用 calc() 算剩余高度
当 sticky 不可用时，改用 position: fixed 的头部，内容区需占满剩余视口高度。此时不能只靠 height: 100%，必须用 calc(100vh - var(--header-height))：
main { height: calc(100vh - var(--header-height, 64px)); overflow-y: auto; }- 注意：
100vh在移动端 Safari 中可能包含地址栏高度波动，更稳妥可加min-height: calc(100vh - var(--header-height))配合flex: 1 - 减号两边必须有空格，
calc(100vh-var(--header-height))会完全失效
真正难的不是写对 calc() 表达式，而是确认 sticky 是否真的在运行 —— 开发者工具里看 computed position 值，比反复调样式更有效。变量和 calc 只是补丁，底层定位机制没打通，再精细的计算也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
