Адаптивный макет с попутным ветром - PullRequest
Новая
       62

Адаптивный макет с попутным ветром

0 голосов
/ 01 октября 2019

Я работаю над адаптивным макетом с Tailwind. На больших экранах у меня есть фиксированный заголовок и фиксированная боковая панель. В меньших разрешениях боковая панель скрыта, а заголовок больше не фиксируется. Содержание всегда будет занимать минимум экрана.

Строки, которые не кажутся не совсем приятными, - это ручное заполнение влево и вправо из-за фиксированного характера. Есть ли лучшее решение для этого? Мне это не особо нравится, потому что, если я уберу боковую панель, отступы автоматически не изменятся.

https://codepen.io/tingaloo/pen/qBWzVqP

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