用 min-height 是解决内容区高度不够最直接安全的方式，它设最小高度且允许内容增多时自动延展；height 则强制固定易致溢出。常用值有 300px、100vh、calc(100vh - 80px)，配合 flex 布局时需父容器设 column 和 100vh，子项用 flex: 1 加 min-height 兜底；注意百分比需父元素有明确高度，推荐 box-sizing: border-box。
内容区高度不够，通常是因为内部元素没撑开容器，或者设置了固定高度限制了扩展。用 min-height 是最直接、安全的解决方式——它让区域至少保持某个高度，同时允许内容变多时自动增高。
为什么不用 height 而用 min-height？
height 是“强制固定”，内容超了会溢出或被裁剪；min-height 是“最低保障”，内容少时维持设定值，内容多时自动延展，更符合响应式和内容优先的设计逻辑。
基础写法与常见值
给内容区（比如 .content 或 main）加一行 CSS 即可：
-
min-height: 300px;—— 最小 300 像素，适合有默认留白需求的板块 -
min-height: 100vh;—— 最小占满视口高度，常用于首页主内容区或登录页居中布局 -
min-height: calc(100vh - 80px);—— 扣除头部/底部高度后填满剩余空间（如 header 高 60px + footer 高 20px）
配合 flex 布局效果更好
如果父容器用了 display: flex，子内容区设 min-height 可能不生效。此时建议：
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
flex-direction: column和min-height: 100vh - 给内容区加
flex: 1，让它自动占据剩余空间，再叠加min-height: 300px作为兜底 - 避免对 flex 子项单独设
height，容易破坏弹性行为
注意浏览器兼容性与细节
min-height 在所有现代浏览器包括 IE9+ 都支持，基本无需前缀。但要注意：
- 百分比值（如
min-height: 50%）需确保父元素有明确高度，否则计算为 0 - 内边距（padding）和边框（border）会额外增加实际高度，必要时用
box-sizing: border-box统一计算方式 - 如果内容区里有浮动元素或绝对定位元素，可能影响高度计算，建议用
clear: both或overflow: hidden清除浮动
