Макет, где много контейнеров должны занимать остальное пространство, но одну внутреннюю прокрутку.CSS - PullRequest
Новая
       20

Макет, где много контейнеров должны занимать остальное пространство, но одну внутреннюю прокрутку.CSS

2 голосов
/ 24 мая 2019

У меня есть проблема, на которую я потратил много часов и никак не мог найти решение.Я свяжу код в CodePen.Это просто часть моего макета.Это является причиной для некоторых стилей корневого элемента.

У меня в основном есть макет, где страница / экран / окно не должно иметь прокрутки, но внутреннее тело виджета таблицы должно быть, когда достаточноэлементы, которые выходят за пределы ожидаемой области таблицы.

В основном у меня есть верхний контент на странице и виджет таблицы.Табличный виджет должен занимать оставшуюся часть экрана.Таблица имеет заголовок и заголовок.Тело должно занять остальную часть табличного пространства и иметь прокрутку, когда у него есть элементы, выходящие за пределы этого пространства.

Я искал много ресурсов через переполнение стека и пробовал много вещей.Я предоставлю текущее состояние макета в ручке.Здесь вы можете увидеть все, что я считаю своей лучшей попыткой.

https://codepen.io/anon/pen/KLogbJ

Центральная область интересов - элемент .body.Исходя из того, что я прочитал, я написал это: 

.body {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;
  padding: 0.5rem;
  min-height: 0;
}

Буду признателен за любую помощь в этом.

Ответы [ 2 ]

0 голосов
/ 24 мая 2019

Вы можете добавить overflow: scroll; к .body и дать .item a min-height

Также укажите свой .table a max-height: 100%;

См. скрипка

0 голосов
/ 24 мая 2019

Проблема в том, что содержимое области, которую вы хотите прокрутить, настроено в масштабе, чтобы соответствовать его контейнеру.Для внутренней прокрутки, которую вы ищете, вам понадобится:

  1. Заданная высота контейнера, чтобы он не расширялся, чтобы соответствовать содержимому (в этом случае вы хотите, чтобы он был равен 100%экрана)
  2. Содержимое не должно масштабироваться по высоте, чтобы соответствовать его контейнеру.Он должен поддерживать свою высоту, чтобы он оставался больше, чем его контейнер.

Если у вас есть эти 2 условия, вы должны увидеть полосы прокрутки.

...