css高度自适应怎么实现

作者：躲藏我的霸气发布日期:2026-07-09 浏览:58

/* 使用 Flexbox 实现高度自适应 */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置容器高度为视口高度 */
}

.content {
  flex-grow: 1; /* 让内容区域自动填充剩余空间 */
}

/* 解释说明：
- .container 是父容器，使用了 flex 布局，并设置了高度为 100vh（视口高度）。
- .content 是子元素，通过设置 flex-grow: 1，使其高度自适应，自动填充父容器的剩余空间。
*/

上一篇：css设置文字间距

下一篇：css grid布局和flex布局