最直接有效的方法是使用100vh或100dvh设置内容区高度，配合Flex/Grid布局实现垂直居中与自适应，并通过overflow-y: auto处理内容溢出。
内容区高度随视口变化，最直接有效的办法就是使用 vh 单位（viewport height），配合合理的布局策略，让元素真正“贴合屏幕高度”。
用 100vh 设置基础高度
给内容区容器设置 height: 100vh，它会占满整个视口高度。注意：这不是父容器的 100%，而是浏览器可视区域的高度，不受滚动或父级影响。
- 适合全屏展示、单页应用主内容区、登录页居中区域等场景
- 避免和
min-height: 100vh混用——后者在内容超长时可能失效，而height: 100vh会强制撑满，需配合overflow-y: auto防止内容被截断 - 移动端 Safari 中，地址栏收起/展开会动态改变视口高度，
100vh可能出现跳变；可考虑用 JavaScript 动态监听并更新高度，或改用100dvh（见下文）
用 dvh 替代 vh 应对移动端视口变化
dvh（dynamic viewport height）是 CSS 新增单位，代表“当前实际可用的视口高度”，能响应 Safari 地址栏伸缩、Android 浏览器工具栏变化等行为。
- 支持情况：Chrome 105+、Safari 16.4+、Firefox 114+（基本覆盖主流新版）
- 写法：
height: 100dvh，效果比100vh更稳定，尤其在 iOS 全屏浏览或横竖屏切换时 - 兼容降级建议：可同时写两行，现代浏览器优先用
dvh，老版本回退到vh
section {
height: 100vh;
height: 100dvh;
}
配合 Flex 或 Grid 实现垂直居中与自适应
仅设高度还不够，常需内容在区域内垂直居中、不溢出、不压缩。Flex 布局是最简洁可靠的方案：
- 给父容器设
display: flex; flex-direction: column;，再加justify-content: center;和align-items: center;实现居中 - 若内容有头部/底部固定区域（如导航栏、版权栏），可用
flex: 1让中间内容区自动填满剩余空间 - Grid 同样适用：
display: grid; grid-template-rows: auto 1fr auto;，其中1fr表示剩余高度自动分配
处理滚动与内容溢出的细节
当内容超出视口高度时，不能简单隐藏，要确保用户可滚动查看全部信息：
- 内容区本身设
overflow-y: auto，内部滚动不影响整体布局 - 避免给 body 或 html 设
height: 100vh，否则可能触发双滚动条（页面级 + 内容区级） - 若使用
position: fixed固定内容区，记得加上top: 0; left: 0;并确认 z-index 层级
