Question

我正在使用Tailwind进行响应式布局。在大屏幕上，我有固定的标题和固定的侧边栏。在较小的分辨率下，侧边栏将被隐藏，并且标题将不再固定。内容将始终占据最小的屏幕。

由于固定的性质，感觉不太好的行是左右的手动填充。有更好的解决方案吗？我不太喜欢它，因为如果我删除侧边栏，则填充不会自动调整。

    <div class="App flex min-h-screen">
      <div class="hidden lg:flex h-screen bg-green-300 fixed w-40">sidebar</div>
      <div class="flex bg-gray-300 lg:pl-40 w-full flex-wrap">
        <div class="flex h-20 w-full lg:pr-40 lg:fixed bg-red-300 justify-between">
          <div class="">Header left</div>
          <div class="">Header right</div>
        </div>
        <div class="bg-blue-400 pt-20 w-full">
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
        </div>
      </div>
    </div>

Answer 1

利用粘性位置而不是固定的位置，以便它仍会占用空间。

要完成此操作，请将fixed更改为sticky top-0，然后就可以摆脱lg:pl-40和lg:pr-40

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.4/tailwind.min.css" rel="stylesheet"/>
    <div class="App flex min-h-screen">
      <div class="hidden lg:flex h-screen bg-green-300 sticky top-0 w-40">sidebar</div>
      <div class="flex bg-gray-300 w-full flex-wrap">
        <div class="flex h-20 w-full lg:fixed bg-red-300 justify-between">
          <div class="">Header left</div>
          <div class="">Header right</div>
        </div>
        <div class="bg-blue-400 pt-20 w-full">
          <div class="h-20">First Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Content</div>
          <div class="h-20">Last Content</div>
        </div>
      </div>
    </div>

快速响应式布局

1 个答案: