限制绝对定位子div最大高度为父容器高度并实现内容滚动

需求说明 #

创建包含头部和内容区域的卡片组件，满足以下要求：

• 卡片最大高度受父容器高度限制
• 内容无法完全容纳时，内容区域支持垂直滚动
• 内容较少时，卡片自动收缩高度适配内容

原代码问题分析 #

你提供的代码存在以下关键问题：

1. .parent 的 height 属性值错误添加了引号，CSS 中长度值不需要引号，应为 height: 100vh;
2. .card 未设置最大高度约束，无法继承父容器的高度限制
3. .content 没有高度限制，默认会随内容高度撑开，overflow-y: scroll 无法触发滚动效果

修复后的代码 #

CSS 代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent {
  position: relative;
  height: 100vh; /* 移除多余引号 */
}

.card {
  position: absolute;
  background: red;
  padding: 8px;
  margin: 16px;
  /* 设置卡片最大高度为父容器高度减去上下margin */
  max-height: calc(100vh - 32px);
  /* 使用flex布局让头部和内容区垂直排列 */
  display: flex;
  flex-direction: column;
  /* 卡片宽度可根据需求调整，这里设为300px示例 */
  width: 300px;
}

.content {
  /* 让内容区占据卡片剩余可用空间 */
  flex: 1;
  /* 内容超出时显示垂直滚动条，未超出时不显示 */
  overflow-y: auto;
  /* 可选：添加内边距优化视觉 */
  padding-top: 8px;
}

HTML 代码 #

<div class="parent">
  <div class="card">
    <div class="header">Header</div>
    <div class="content">
      <pre>
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit. 
      </pre>
    </div>
  </div>
</div>

实现说明 #

• 父容器设置 height: 100vh 占据视口高度
• 卡片通过 max-height: calc(100vh - 32px) 限制最大高度（减去上下margin的16px*2）
• 使用 flex 布局让头部自动适应高度，内容区占据剩余空间
• 内容区设置 flex:1 和 overflow-y:auto，实现内容超出时滚动，未超出时自适应高度

内容的提问来源于stack exchange，提问作者user3612643