如何在Web应用布局中实现无需JavaScript的可滚动div

Tailwind CSS 实现方案 #

完整结构代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="h-screen m-0 p-0 overflow-hidden flex flex-col">
  <!-- 红色顶部栏 -->
  <div class="bg-red-500 p-4">
    顶部固定内容
  </div>
  <!-- 蓝色容器 -->
  <div class="flex-1 overflow-hidden bg-blue-500 p-4">
    <!-- 粉色滚动区域 -->
    <div class="bg-pink-500 overflow-y-auto h-full">
      <!-- 大量测试内容 -->
      <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>
    </div>
  </div>
</body>
</html>

关键设置说明：

• body 配置 h-screen overflow-hidden flex flex-col：固定页面高度为视口高度，禁止页面整体滚动，同时设置垂直flex布局
• 红色栏为普通块级元素，高度由自身内容/内边距决定
• 蓝色容器用 flex-1：在垂直flex布局中自动占据剩余视口高度，overflow-hidden 避免自身被内容撑开
• 粉色区域设置 h-full overflow-y-auto：填满蓝色容器高度，内容超出时自动显示垂直滚动条

标准CSS 实现方案 #

对应代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .top-bar {
      background-color: #ef4444;
      padding: 1rem;
    }
    .blue-container {
      flex: 1;
      overflow: hidden;
      background-color: #3b82f6;
      padding: 1rem;
    }
    .scroll-area {
      height: 100%;
      overflow-y: auto;
      background-color: #ec4899;
    }
  </style>
</head>
<body>
  <div class="top-bar">顶部固定内容</div>
  <div class="blue-container">
    <div class="scroll-area">
      <!-- 大量测试内容 -->
      <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>
    </div>
  </div>
</body>
</html>

核心原理和Tailwind方案一致：

• 将body设为垂直flex容器，高度固定为视口高度
• 顶部栏不设置flex属性，自然占据自身高度
• 蓝色容器通过flex:1抢占剩余高度，overflow:hidden限制自身不会被内容撑开
• 粉色滚动区域填满蓝色容器，overflow-y:auto实现内容滚动

为什么之前的方法失效？ #

• h-full依赖父元素的明确高度，如果父元素没有固定高度，h-full会被内容撑开，导致页面整体滚动
• 单独用max-height无效是因为没有基于视口的参考值，而flex布局的flex:1会自动计算剩余空间，完美适配响应式需求

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