带有 Tailwindcss 的可滚动分区的静态页面

Question

我想要的是整个页面是静态的，并且段落的划分是可滚动的。由于标头，目前主页也可以滚动。如何防止这种情况？代码片段：

    <main class="flex flex-col h-screen">
        <div class="flex bg-blue-300 h-32 ">Masthead</div>
        <div class="flex flex-row h-full">
            <div class="bg-gray-100 w-32 p-4">Sidebar</div>
            <div class="flex flex-col bg-white flex-grow">
                <div class="bg-gray-300 h-16 p-4">
                    <p>Header</p>
                </div>
                <div class="paragraph overflow-y-auto px-4">
                    @for($i=1; $i < 200; $i++)
                    <p>paragraph</p>
                    @endfor
                </div>
            </div>
        </div>
    </main>

Answer 1

我一直喜欢使用flex flex-col flex-1组合来实现这样的布局。结帐 Tailwind Layout 我为了更好地理解而创建的。

<main class="flex flex-col h-screen">
  <div class="flex h-32 bg-blue-300">Masthead</div>
  <div class="flex flex-1 overflow-hidden">
    <div class="flex bg-gray-100 w-32 p-4">Sidebar</div>
    <div class="flex flex-1 flex-col">
      <div class="flex bg-gray-300 h-16 p-4">Header</div>
      <div class="flex flex-1 bg-blue-300 overflow-y-auto paragraph px-4">
         @for($i=1; $i < 200; $i++)
           <p>paragraph</p>
         @endfor
      </div>
    </div>
  </div>
  <div class="flex">Footer</div>
</main>

带有 Tailwindcss 的可滚动分区的静态页面

Static page with scrollable division with Tailwindcss

css

tailwind-css