全屏高度flex父容器内.col中article自动滚动实现方案问询

当然可以实现你的需求，核心是通过弹性布局让article自动填充.col的剩余高度，并为article添加垂直滚动规则。以下是具体修改方案：

关键CSS调整步骤 #

• 确保页面根元素（html、body）和容器.container都设置全屏高度，清除默认边距
• 让.col成为垂直方向的弹性容器，保持全屏高度
• 给article设置flex: 1使其填充.col的剩余可用高度，同时添加overflow-y: auto实现内容溢出滚动

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    /* 重置默认样式并设置全屏高度基础 */
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    .container {
      display: flex;
      height: 100%;
    }
    
    .col {
      flex: 1;
      height: 100%;
      border: 1px solid #ccc;
      /* 关键：将列设为垂直弹性容器 */
      display: flex;
      flex-direction: column;
    }
    
    .col header {
      padding: 1rem;
      background: #f5f5f5;
      border-bottom: 1px solid #ccc;
    }
    
    /* 关键：让article填充剩余高度并支持滚动 */
    .col article {
      flex: 1;
      padding: 1rem;
      overflow-y: auto;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="col">
    <header>Column 1</header>
    <article>
      <!-- 这里可以添加大量测试内容，比如重复的文本 -->
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
    </article>
  </div>
  <div class="col">
    <header>Column 2</header>
    <article>
      短内容测试
    </article>
  </div>
</div>
</body>
</html>

效果说明 #

• .col始终保持全屏高度，不会因为内部内容过长而被撑开
• 当article内的内容高度超过.col的剩余高度（扣除header的高度）时，article会自动出现垂直滚动条，内容可滚动查看
• 弹性布局确保header始终固定在列的顶部，article自动填充下方剩余空间

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