保持一列固定而另一列滚动

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 进行滚动。这是一个稍微风格化的小提琴，希望这会有所帮助。