使用Flexbox和CSS Grid实现响应式高度自适应：1. Flex的flex-grow与flex-shrink控制子元素伸缩，使主内容区自动填充剩余空间；2. Grid通过grid-template-rows与fr单位分配行高，实现头部、主体、底部的自适应布局；3. 结合两者优势，在Grid划分区域后，内部用Flex进一步控制垂直方向伸缩。关键在于设置容器高度为100vh并合理处理溢出。
实现响应式网页元素高度自适应，关键是让内容区域根据容器或屏幕尺寸动态调整。使用
Flexbox
的 grow 与 shrink 属性，结合
CSS Grid
布局，可以灵活控制元素在不同设备下的高度表现。
1. Flex grow 和 shrink 控制弹性高度
在 Flex 容器中，子元素可以通过
flex-grow
和
flex-shrink
决定如何分配剩余空间或收缩以适应容器。
例如，让主内容区自动填充剩余高度：
这样，
.main
会随着窗口变化自动调整高度，不会溢出或留白。
2. Grid 布局实现网格内高度自适应
CSS Grid 更适合复杂布局，也能实现高度自适应。通过
fr
单位和
minmax()
可精细控制行高。
这里
1fr
表示主区域占据除固定部分外的所有可用高度，天然支持响应式。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
3. Flex 与 Grid 结合使用场景
实际项目中，可在外层用 Grid 划分整体结构，在内部用 Flex 实现局部自适应。
比如一个左侧侧边栏 + 主内容的布局：
Grid 控制左右分区，Flex 在右侧实现垂直方向的高度自适应，两者互补优势明显。
基本上就这些。合理运用 flex-grow、flex-shrink 和 Grid 的 fr 单位，就能让元素在各种屏幕上自然伸缩，不依赖固定像素值，真正实现响应式高度自适应。关键在于设置好容器高度（如 100vh），并控制好溢出行为。
.container {
display: flex;
flex-direction: column;
height: 100vh; /* 占满视口高度 */
}
.header {
flex-shrink: 0;
height: 60px; / 固定头部高度 /
}
.main {
flex-grow: 1; / 自动撑满剩余空间 /
flex-shrink: 1;
overflow-y: auto; / 内容过多时内部滚动 /
}
.footer {
flex-shrink: 0;
height: 40px;
}
.grid-layout {
display: grid;
grid-template-rows: 60px 1fr 40px; /* 头部固定，主体占剩余，底部固定 */
height: 100vh;
gap: 10px;
}
.grid-header { background: #eee; }
.grid-main { overflow-y: auto; }
.grid-footer { background: #ddd; }
.layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 1fr;
height: 100vh;
}
.sidebar {
background: #f5f5f5;
}
.content {
display: flex;
flex-direction: column;
height: 100%;
}
.content-header {
height: 50px;
flex-shrink: 0;
}
.content-main {
flex-grow: 1;
overflow-y: auto;
}