如何用Tailwind实现活动流高度适配主区域并支持溢出滚动？

完全可以用纯Tailwind CSS实现，不需要依赖JavaScript。核心思路是让主内容区和侧边栏共享统一的高度上下文，强制侧边栏高度匹配主内容区的高度，超出内容自动滚动。

方案一：Table布局（兼容性好） #

利用table单元格自动匹配高度的特性，让侧边栏高度和主内容区保持一致，内容超出时滚动。

<div class="container mx-auto p-4">
  <!-- 模拟table容器 -->
  <div class="table w-full">
    <div class="table-row">
      <!-- 主内容区：自动宽度，自然高度撑开行高 -->
      <div class="table-cell w-full bg-blue-100 p-4">
        <h2 class="text-xl font-bold mb-4">Main Content</h2>
        <p class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>

      <!-- 活动流侧边栏：固定宽度，内容容器滚动 -->
      <div class="table-cell w-80 bg-gray-100 p-4 align-top">
        <div class="h-full overflow-y-auto">
          <h2 class="text-xl font-bold mb-4">Activity Stream</h2>
          <div class="space-y-2">
            <div class="bg-white p-2 rounded">Activity item 1</div>
            <div class="bg-white p-2 rounded">Activity item 2</div>
            <div class="bg-white p-2 rounded">Activity item 3</div>
            <div class="bg-white p-2 rounded">Activity item 4</div>
            <div class="bg-white p-2 rounded">Activity item 5</div>
            <div class="bg-white p-2 rounded">Activity item 6</div>
            <div class="bg-white p-2 rounded">Activity item 7</div>
            <div class="bg-white p-2 rounded">Activity item 8</div>
            <div class="bg-white p-2 rounded">Activity item 9</div>
            <div class="bg-white p-2 rounded">Activity item 10</div>
            <div class="bg-white p-2 rounded">Activity item 11</div>
            <div class="bg-white p-2 rounded">Activity item 12</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

方案二：Grid+绝对定位（现代CSS） #

通过Grid布局建立基础结构，结合绝对定位让侧边栏高度强制匹配主内容区，超出内容滚动。

<div class="container mx-auto p-4">
  <!-- Grid容器：一行两列 -->
  <div class="grid grid-cols-[1fr_300px] gap-4 relative">
    <!-- 主内容区：自然高度，撑开Grid行高 -->
    <div class="bg-blue-100 p-4 z-10">
      <h2 class="text-xl font-bold mb-4">Main Content</h2>
      <p class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <!-- 活动流侧边栏：与主内容区同高度，超出滚动 -->
    <div class="bg-gray-100 p-4 h-full overflow-y-auto absolute right-4 top-4 w-72">
      <h2 class="text-xl font-bold mb-4">Activity Stream</h2>
      <div class="space-y-2">
        <div class="bg-white p-2 rounded">Activity item 1</div>
        <div class="bg-white p-2 rounded">Activity item 2</div>
        <div class="bg-white p-2 rounded">Activity item 3</div>
        <div class="bg-white p-2 rounded">Activity item 4</div>
        <div class="bg-white p-2 rounded">Activity item 5</div>
        <div class="bg-white p-2 rounded">Activity item 6</div>
        <div class="bg-white p-2 rounded">Activity item 7</div>
        <div class="bg-white p-2 rounded">Activity item 8</div>
        <div class="bg-white p-2 rounded">Activity item 9</div>
        <div class="bg-white p-2 rounded">Activity item 10</div>
        <div class="bg-white p-2 rounded">Activity item 11</div>
        <div class="bg-white p-2 rounded">Activity item 12</div>
      </div>
    </div>
  </div>
</div>

方案说明 #

• 方案一兼容性更好，适配所有现代浏览器，无需担心定位偏移问题。
• 方案二使用绝对定位，需要注意侧边栏的宽度和定位参数，确保与Grid布局的列宽匹配。

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