Мобильная версияПочему заполнение области прокрутки переполнения не применяется к контейнеру сетки, когда элемент сетки с внешней высото ⇐ CSS
-
Anonymous
Почему заполнение области прокрутки переполнения не применяется к контейнеру сетки, когда элемент сетки с внешней высото
Пример HTML и CSS:
.root { цвет фона: зеленый; } .outer { дисплей: сетка; строки-шаблона сетки: 100vh; столбцы шаблона сетки: 100 пикселей; отступ: 5рем; переполнение-у: авто; } .nav { цвет фона: красный; высота: 150вх; } * { размер коробки: граница-коробка; } Пример скрипта: https://jsfiddle.net/dr18cbet/
В этом надуманном примере прокрутка к нижней части контейнера сетки не включает в себя отступы нижней части контейнера сетки.
Определенно существуют лучшие способы организации работы этого кода, например, перемещение настроек заполнения и переполнения в элемент сетки (в данном случае, nav). Я также заметил, что если я установлю для grid-template-rows значение по умолчанию auto, заполнение также будет отображаться так, как ожидалось. Однако эта комбинация настроек переполнения + заполнения в контейнере сетки и элемент сетки, получающий внешнюю высоту (в примере это 100vh), приводит к тому, что нижнее заполнение контейнера не применяется. Почему это? Я покопался в спецификациях CSS, но не нашел объяснения.
Пример HTML и CSS:
.root { цвет фона: зеленый; } .outer { дисплей: сетка; строки-шаблона сетки: 100vh; столбцы шаблона сетки: 100 пикселей; отступ: 5рем; переполнение-у: авто; } .nav { цвет фона: красный; высота: 150вх; } * { размер коробки: граница-коробка; } Пример скрипта: https://jsfiddle.net/dr18cbet/
В этом надуманном примере прокрутка к нижней части контейнера сетки не включает в себя отступы нижней части контейнера сетки.
Определенно существуют лучшие способы организации работы этого кода, например, перемещение настроек заполнения и переполнения в элемент сетки (в данном случае, nav). Я также заметил, что если я установлю для grid-template-rows значение по умолчанию auto, заполнение также будет отображаться так, как ожидалось. Однако эта комбинация настроек переполнения + заполнения в контейнере сетки и элемент сетки, получающий внешнюю высоту (в примере это 100vh), приводит к тому, что нижнее заполнение контейнера не применяется. Почему это? Я покопался в спецификациях CSS, но не нашел объяснения.
