如何让Tailwind中子元素占剩余空间且保持可滚动

问题描述 #

使用Tailwind CSS构建页面时遇到以下问题：

• 页面包含固定高度的顶部header，下方是需要滚动的内容区域
• 滚动区域超出容器高度，导致整个页面出现滚动条
• 尝试给最外层父元素设置overflow-hidden，但问题未解决

原始代码 #

<div class="flex h-screen flex-col">
  <div class="h-48 bg-white">some content</div>
  <div class="h-full pb-9">
    <div class="h-full overflow-y-scroll bg-red-300 [&>*]:px-4" id="content">
      <div class="sticky top-0 z-50 flex items-start justify-between bg-red-300 py-4">
        <div>
          <h2 class="text-xl">header</h2>
        </div>
      </div>
      <div class="h-full">
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
      </div>
    </div>
  </div>
</div>

问题分析 #

1. 最外层flex flex-col h-screen容器中，内容区使用h-full会尝试占满整个屏幕高度，加上顶部header的h-48，总高度超过屏幕，引发页面滚动
2. 滚动容器内部的内容div设置h-full，进一步导致高度溢出
3. pb-9的内边距额外增加了内容区高度，加剧溢出问题

修复方案 #

修改后的代码 #

<div class="flex h-screen flex-col overflow-hidden">
  <div class="h-48 bg-white">some content</div>
  <div class="flex-1 pb-9 overflow-hidden">
    <div class="h-full overflow-y-scroll bg-red-300 [&>*]:px-4" id="content">
      <div class="sticky top-0 z-50 flex items-start justify-between bg-red-300 py-4">
        <div>
          <h2 class="text-xl">header</h2>
        </div>
      </div>
      <div>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
        <h1 class="text-7xl">too much height</h1>
      </div>
    </div>
  </div>
</div>

关键修改点 #

• 最外层容器添加overflow-hidden，阻止整体页面滚动
• 内容区的h-full替换为flex-1，自动占据顶部header剩余的屏幕空间
• 内容区添加overflow-hidden，确保内部滚动容器不会超出其范围
• 移除内容区内部的h-full，让内容自然撑开，由外层滚动容器控制滚动

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