使用视口单位、Flexbox和Grid布局实现高度自适应：1. 设置vh或dvh单位确保全屏占位；2. Flex容器中主内容区设flex:1占据剩余空间；3. Grid通过grid-template-rows定义auto与fr组合分配行高；4. 媒体容器用aspect-ratio或padding-top百分比保持宽高比，根据场景选择合适方案。
在响应式设计中，容器的高度自适应常常比宽度更难处理。由于高度依赖内容或父元素，直接设置固定值会破坏布局灵活性。要实现真正流畅的高度自适应，关键在于结合视口单位、弹性布局和内容驱动的策略。
使用视口单位（vh）控制基础高度
视口单位能根据屏幕尺寸动态调整元素高度，特别适合全屏或占位明确的模块。
- 设置height: 100vh让容器占满整个视口高度
- 用min-height: 50vh确保最小可视区域，避免内容过少时塌陷
- 注意移动端浏览器地址栏会影响实际可用高度，可改用dvh（动态视口单位）提升兼容性
Flexbox 实现内容撑开与剩余空间填充
弹性布局是解决高度自适应最可靠的方案之一，尤其适用于不确定内容量的场景。
- 父容器设置display: flex; flex-direction: column开启纵向伸缩
- 主内容区添加flex: 1自动占据剩余空间
- 头部和底部固定高度，中间区域随内容或窗口变化自然拉伸
Grid 布局中的自适应行高
CSS Grid 提供了更精细的高度控制能力，适合复杂结构。
立即学习“前端免费学习笔记（深入）”；
- 使用grid-template-rows: auto 1fr auto定义三行布局，中间行填满剩余空间
- 1fr表示可用空间的一份比例，多个fr单位可按比例分配
- 配合minmax()函数限制最小最大高度，如minmax(200px, 1fr)
图片或媒体容器的等比缩放技巧
当容器内含图片或视频时，保持宽高比至关重要。
- 使用“padding-top 百分比”技巧：外层容器设置position: relative，padding-top 等于高宽比（如 56.25% 对应 16:9）
- 内部元素绝对定位并铺满：position: absolute; inset: 0
- 现代方法可用aspect-ratio: 16 / 9直接定义比例，简化代码
基本上就这些实用技巧。选择哪种方式取决于具体场景——简单页面可用 vh 配合 min-height，复杂结构推荐 Flex 或 Grid。关键是让高度响应内容和设备变化，而不是强行固定。
