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

【问题标题】：Static page with scrollable division with Tailwindcss带有 Tailwindcss 的可滚动分区的静态页面
【发布时间】：2021-05-02 12:35:03
【问题描述】：

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

    <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>

【问题讨论】：

请同时提供 CSS 样式。

标签： css tailwind-css

【解决方案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>

【讨论】：