Блог

Главная - Вопросы по программированию - Макет TailwindCss с панелью содержимого во всю высоту экрана и прокруткой

Макет TailwindCss с панелью содержимого во всю высоту экрана и прокруткой

#html #css #flexbox #tailwind-css

#HTML #css #flexbox #tailwind-css

Вопрос:

Я пытаюсь создать типичный html-макет, используя TailwindCss — фиксированный верхний и нижний колонтитулы с левой и правой боковыми панелями.

Центральное содержимое имеет функцию поиска, которая исправлена — содержимое ниже должно прокручиваться.

Я пробовал использовать шаблоны из TailwindCss и TailwindUI, но не могу заставить переполненный контент (показанный светло-синим цветом в демонстрации ниже) прокручиваться, а не нажимать страницу вниз.

 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div>
  <div class="h-screen flex flex-col bg-gray-300">
    <!-- header -->
    <div class="bg-blue-700 p-4">
      Nav
    </div>
    <div class="flex-grow flex flex-row justify-center">
      <!-- lhs -->
      <div class="flex-shrink-0 w-1/4 p-4">
        Left menu
      </div>
      <!-- center -->
      <div class="flex-1 flex flex-col bg-white">
        <div class="border-b-2 m-4 pb-2 border-gray-200">Search</div>
        <main class="flex-1 overflow-y-scroll p-4 bg-indigo-200">
          <div class="relative">
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
          </div>
        </div>
      </main>
      <!-- rhs -->
      <div class="flex-shrink-0 w-1/4 p-4">
        Right sidebar
      </div>
    </div>
    <!-- footer -->
    <div class="bg-blue-700 p-4">
      Footer
    </div>
  </div>
</div>

Ответ №1:

Происходит то, что средний div (который содержит центральный столбец, который мы хотим прокручивать) зажимается до высоты его содержимого. Если не указано иное, он предпочел бы сделать это, чем переполнение (по крайней мере, в Chrome и Firefox). Таким образом, наша центральная колонка даже не получает возможности применить собственное поведение прокрутки.

Минимальное решение — поместить overflow-hidden средний div, чтобы он знал, что его содержимое может переполняться:

 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div>
  <div class="h-screen flex flex-col bg-gray-300">
    <!-- header -->
    <div class="bg-blue-700 p-4">
      Nav
    </div>
    <div class="flex-grow flex flex-row overflow-hidden justify-center">
      <!-- lhs -->
      <div class="flex-shrink-0 w-1/4 p-4">
        Left menu
      </div>
      <!-- center -->
      <div class="flex-1 flex flex-col bg-white">
        <div class="border-b-2 m-4 pb-2 border-gray-200">Search</div>
        <main class="flex-1 overflow-y-auto p-4 bg-indigo-200">
          <div class="relative">
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
          </div>
        </div>
      </main>
      <!-- rhs -->
      <div class="flex-shrink-0 w-1/4 p-4">
        Right sidebar
      </div>
    </div>
    <!-- footer -->
    <div class="bg-blue-700 p-4">
      Footer
    </div>
  </div>
</div>

… в результате чего поведение прокрутки переполнения центрального столбца становится работоспособным.

Я также предложил overflow-y-auto в центральном столбце, чтобы полосы прокрутки появлялись только при необходимости.

Ответ №2:

Возможно, это не идеальное решение, но оно помогает. Добавьте это правило в свой css:

 main.flex-1.overflow-y-scroll.p-4.bg-indigo-200 {
    flex-basis: 0;
}
  

 main.flex-1.overflow-y-scroll.p-4.bg-indigo-200 {
    flex-basis: 0;
}  
 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div>
  <div class="h-screen flex flex-col bg-gray-300">
    <!-- header -->
    <div class="bg-blue-700 p-4">
      Nav
    </div>
    <div class="flex-grow flex flex-row justify-center">
      <!-- lhs -->
      <div class="flex-shrink-0 w-1/4 p-4">
        Left menu
      </div>
      <!-- center -->
      <div class="flex-1 flex flex-col bg-white">
        <div class="border-b-2 m-4 pb-2 border-gray-200">Search</div>
        <main class="flex-1 overflow-y-scroll p-4 bg-indigo-200">
          <div class="relative">
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
          </div>
        </div>
      </main>
      <!-- rhs -->
      <div class="flex-shrink-0 w-1/4 p-4">
        Right sidebar
      </div>
    </div>
    <!-- footer -->
    <div class="bg-blue-700 p-4">
      Footer
    </div>
  </div>
</div>

Комментарии:

1. Интересно, спасибо. flex-1 Применяется So flex-basis: 0% , тогда как применяется переопределение вашего стиля flex-basis: 0 . Не уверен в своем опыте работы с Tailwind — вы думаете, это ошибка?

2. Странно, но я только что попробовал применить flex-basis: 0 правило к main тегу ( flex-1.overflow-y-scroll.p-4.bg-indigo-200 ), и переполнение скрыто, хотя flex-basis is: 0% работает по-другому. Я не могу подтвердить, что это определенно ошибка, поскольку у меня не было практики работы с. TailwindCss

3. Изначально я дал не совсем правильный ответ, из-за того, что правило влияет более чем на один селектор. Я обновил ответ на более правильный из вашей подсказки.