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

Posted 2023-03-07

【中文标题】保持一列固定，而另一列滚动

【英文标题】：Keeping one column fixed while th other scrolls

【发布时间】：2019-12-31 10:23:28

【问题描述】：

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

参考https://vimeo.com/350933479#t=46s。

【参考方案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 和 overflow-hidden 类，以确保它填充可用空间但隐藏溢出的内容。

在可滚动包装器内有另一个 div，它是带有 flex-1 的可滚动内容区域，因此它可以扩展到可用空间，溢出时可以滚动滚动。这是一个稍微风格化的fiddle，希望对您有所帮助。

【讨论】：

感谢您的帮助。有没有办法在没有 2 个滚动条的情况下向布局添加导航栏？ jsfiddle.net/ybo6L1pd/1 导航栏应该贴在顶部 jsfiddle.net/ybo6L1pd/2 并且，不需要时不显示任何滚动条（可滚动容器中的内容不需要滚动）jsfiddle.net/1ts75wu8/1

在您的示例中，您在 h 屏幕内容块之外有一个导航，因此它使窗口对象具有滚动条。有一些重新排列要做，并且您需要主要元素具有 flex-col 以便导航栏保持在主要内容区域和侧边栏上方。要使滚动条在内容未溢出时不显示在嵌套区域内，您需要将 overflow-y-scroll 更改为 overflow-y-auto 并确保将隐藏的溢出移动到主要内容区域的顶部，如下所示（使用切换按钮更改内容长度）jsfiddle.net/JHeth/d8vj6ncg/19