Question

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

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

Answer 1

TailwindCSS的创建者Adam Wathan制作了一个Slack clone，它确实可以满足您的需求，这是一个更基本的示例，并解释了其工作原理：

示例：

<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类，并且将其隐藏起来，以确保它填充了可用空间，但隐藏了溢出的内容。

可滚动包装器内还有一个div，它是您使用flex-1的可滚动内容区域，因此它会扩展到可用空间，并且溢出y-scroll会在溢出时滚动。这里的样式fiddle稍有帮助，希望如此。

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

1 个答案: