保持一列固定，而其他滚动

Question

我正在使用 Tailwind CSS 1.1.2，想知道如何创建一个两列布局，其中一列固定，而另一列垂直滚动。

请参阅 https://vimeo.com/350933479#t=46s 以供参考。

Answer 1

TailwindCSS 的创建者 Adam Wathan 制作了一个 Slack 克隆，它完全可以满足您的需求，这里有一个更基本的示例以及对其工作原理的解释：

示例：

<div class="h-screen flex">
  <!-- Fixed sidebar -->
  <div class="bg-gray-600 w-64">
    <!-- Sidebar content -->
  </div>
  <!-- Scroll wrapper -->
  <div class="flex-1 flex overflow-hidden">
    <!-- Scrollable container -->
    <div class="flex-1 overflow-y-scroll">
      <!-- Your content -->
    </div>
  </div>
</div>

解释 父元素具有 flex 和 h-screen 类，因此它填充屏幕的高度。

在其内部，固定列应用了一定的宽度，或者它可以是共享屏幕某些部分的弹性列。

可滚动列被包裹在一个 div 中，其类为 flex-1 flex 和 Overflow-hidden，以确保它填充可用空间但隐藏溢出的内容。

在可滚动包装器内部有另一个 div，它是带有 flex-1 的可滚动内容区域，因此它会扩展到可用空间，并在溢出时使用 Overflow-y-scroll 进行滚动。这是一个稍微更有风格的fiddle希望这会有所帮助。

Answer 2

想要对任何偶然发现此页面的可怜的灵魂做出回应。

u/JHeth 解决方案有效，但它看起来像是一个奇怪的解决方案，并且仅适合该类型的应用程序。

对于那些考虑到需要针对多列或移动响应进行缩放的网格布局的人来说，提供了一个似乎更合理的解决方案。

<div class="grid grid-cols-2 bg-sky-700">
   <div class="sticky top-0 col-span-1 h-screen bg-blue-500">
     LEFT COLUMN CONTENT HERE THAT DOESNT MOVE
   </div>
   <div class="col-span-1 bg-slate-800">
     SCROLLY CONTENT HERE
      <div class="h-dvh bg-blue-800">SCROLLY DIV 1</div>
      <div class="h-dvh bg-red-500">SCROLLY DIV 2</div>
   </div>
</div>

一些上下文：粘性使左栏与网格系统交互。固定会由于某种原因破坏其流动并忽略宽度。

您可以通过更改父级中的 grid-cols-x 并为每个直接子级提供您想要的任何范围来创建任意数量的列。我建议观看有关顺风网格系统的 30 秒视频。

我也更喜欢这种方法，因为当您希望将列合并为单列而不是 20%-80% 时，它更容易设置断点。

这是一个示例：https://play.tailwindcss.com/UHE4fA6ot4