如何实现两个独立滚动的列布局？

Question

我有一个带有标题和两列的简单布局。目标是任何一列都不应该超出屏幕底部，从而导致整个页面滚动。相反，如果他们的内容需要，他们应该各自独立滚动。下面是一个最小化的示例和小提琴。

<script src="https://cdn.tailwindcss.com"></script>

<div class="min-h-screen max-h-screen w-full bg-gray-400">

<div class="flex justify-center bg-gray-500">HEADER</div>

<div class="flex mb-4">

<div class="w-1/2 bg-gray-600">
  <input type="text">
  <div class="overflow-y-auto">
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
  </div>
</div>

<div class="w-1/2 bg-gray-700">
  <input type="text">
  <div class="overflow-y-auto">
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
  </div>
</div>

https://jsfiddle.net/z0qpm1vL/

Answer 1

这是保持视口缩放的方法：

flex flex-col 在全局容器上，grow overflow-hidden 在列表容器上，overflow-auto 在每个列表上。

.as-console-wrapper { display: none !important }

<script src="https://cdn.tailwindcss.com"></script>

<div class="h-screen bg-gray-400 flex flex-col">

  <div class="flex justify-center bg-gray-500">HEADER</div>
  
  <div class="flex mb-4 grow overflow-hidden">
  
    <div class="w-1/2 bg-gray-600 overflow-auto">
      <input type="text">
      <div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
      </div>
    </div>
    
    <div class="w-1/2 bg-gray-700 overflow-auto">
      <input type="text">
      <div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
      </div>
    </div>
    
  </div>
</div>

Answer 2

您需要为每一列设置固定高度。

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="min-h-screen max-h-screen w-full bg-gray-400">

  <div class="flex justify-center bg-gray-500">HEADER</div>
  
  <div class="flex mb-4">
  
    <div class="w-1/2 bg-gray-600">
      <input type="text">
      <div class="overflow-y-auto h-64">
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
      </div>
    </div>
    
    <div class="w-1/2 bg-gray-700">
      <input type="text">
      <div class="overflow-y-auto h-64">
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
      </div>
    </div>
    
  </div>
</div>

Answer 3

你可以试试这样的。 Fiddle

#left-col{
    float: left;
    width: 50%;
    background: red;
    height: 100%;
    overflow: scroll;
}
#right-col {
    float: left;
    width: 50%;
    background: blue;
    height: 100%;
    overflow: scroll;
}