Tailwind CSS如何实现侧边栏吸顶常驻且占满高度，适配可选顶部头部？

解决方案 #

你可以通过调整右侧容器的布局结构，将滚动区域限制在内容区实现需求，全程不需要硬编码任何固定高度数值，天然适配可选顶部头部的存在。

改动点如下： #

• 给包裹可选头部、头部、内容区的右侧外层容器添加 flex flex-col h-screen overflow-hidden 类，将其设为满视口高度的垂直弹性盒，超出部分隐藏
• 给包裹 sidebar two 和正文内容的flex容器添加 flex-1 overflow-auto 类，让它自动占满右侧容器剩余高度，超出部分内部滚动
• 给 sidebar two 元素添加 h-full 类，让它占满父容器的高度，实现常驻效果

修改后完整代码： #

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="flex bg-gray-200">
  <div class="sticky left-0 top-0 w-24 h-screen bg-gray-800">sidebar</div>
  <div class="flex-1 flex flex-col h-screen overflow-hidden">
    <div class="h-6 bg-gray-500">optional top header</div>
    <header class="sticky left-0 top-0 h-10 bg-gray-600">header</header>
    <div class="flex flex-1 overflow-auto">
      <div class="flex-none w-44 bg-gray-700 h-full">sidebar two</div>
      <div class="flex-1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem similique repudiandae voluptate ad, ullam necessitatibus deleniti ab cumque, error neque culpa, minus fuga unde alias ipsum! Aspernatur vel odit architecto? Blanditiis quidem numquam, vitae ducimus libero dolore, veritatis necessitatibus hic explicabo dolorem eius odit possimus, rem architecto commodi nesciunt officiis? Error id repudiandae magnam modi facere doloribus reiciendis quasi est! Cum nemo repudiandae quos possimus at exercitationem adipisci quasi autem, illo eaque quae accusantium non quibusdam quod dolorum, veniam optio, eligendi nisi ipsam accusamus quaerat assumenda vitae. Esse, consectetur corporis! Placeat nam temporibus sunt quas et nihil tempora, sit exercitationem consectetur veritatis modi quibusdam inventore ducimus blanditiis fugiat vero odio expedita voluptates laudantium ratione sequi. Dolores deserunt suscipit delectus nostrum. Placeat dolorem rem ipsa soluta, assumenda odit explicabo quae perspiciatis eum. Sed accusamus illum cupiditate molestiae quia accusantium animi. Velit, et. Ullam veritatis aut sapiente vitae harum architecto sed fuga. Ducimus pariatur reiciendis culpa tempore mollitia corporis aspernatur, odio dicta, minima optio cum voluptates recusandae, nihil saepe qui quasi consectetur ex commodi eaque officia dolore illum? Fugit et beatae adipisci! Obcaecati esse incidunt eaque iure ex porro, pariatur unde, quia impedit nam a temporibus doloremque expedita cumque in numquam, quasi ut quod ipsum nobis? Labore soluta voluptatem perferendis a est. Soluta labore voluptatem veritatis alias vitae maiores minima dicta, repellat quidem repellendus obcaecati. Neque sit cupiditate atque consequuntur error dolorum, alias voluptates, eius voluptate, libero expedita quasi officiis fuga doloremque? Rerum nihil quidem officiis obcaecati fugit quia maxime nisi doloremque, reprehenderit eveniet enim debitis iusto in earum nesciunt nobis, perferendis facere placeat aspernatur sequi, quos vel sed. Voluptatem, magnam officiis. Delectus tempora quod quasi reiciendis sapiente libero accusamus sit exercitationem enim, totam maxime molestiae fugit dolorum placeat praesentium quae? Veritatis quibusdam molestias dignissimos aut fugit rerum quam facere corrupti minus.
      </div>
    </div>
  </div>
</div>

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