Получить профессию в Skypro
Заполнение оставшегося вертикального пространства CSS
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Для заполнения доступного вертикального пространства гибким расположением элементов используйте Flexbox. В контейнере установите display: flex и flex-direction: column. Для дочернего элемента, который должен занимать оставшееся пространство, установите flex-grow: 1:
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.main-content {
flex-grow: 1;
}Не забудьте установить height: 100% и margin: 0 для <body>, чтобы исключить проблемы с встроенными отступами и полностью использовать доступное пространство.
Конфигурация основы
Чтобы контейнер занимал всю высоту окна браузера:
html, body { height: 100%; margin: 0; }Такая конфигурация обеспечит надёжную основу и избавит от стандартных настроек, которые могут привести к неожиданным результатам.
Альтернативы и запасные варианты
Абсолютное позиционирование
Вместо Flexbox можно использовать абсолютное позиционирование. Это решение менее гибкое, но вполне надёжное.
#second {
position: absolute;
top: 200px; bottom: 0; left: 0; width: 300px;
background-color: #9ACD32;
}Использование свойств таблицы в CSS
Если вам ещё помнятся старые таблицы, можно использовать свойства display: table и его производные:
.wrapper { display: table; width: 100%; }
.row { display: table-row; }
.cell { display: table-cell; }Еgo гибкость не так велика по сравнению с Flexbox, но подобный подход также может оказаться эффективным.
Работа с элементами фиксированной высоты
Приведём пример с блоком .content, располагающимся между .header и .footer, имеющими фиксированную высоту.
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
height: 100px;
}
.content {
flex-grow: 1;
overflow: auto;
}
.footer {
height: 50px;
}Визуализация
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
height: 50px;
}
.content {
flex: 1;
}
.footer {
height: 30px;
}На "сцене" нашего Viewport:
👒 = .header (Фиксированная шапка)
🧔 = .content (Гибкий главный элемент)
👞 = .footer (Фиксированный подвал)Продвинутые тактики
Учёт разнородности размеров экранов
Использование процентов или единиц высоты окна браузера (vh) для определения размеров контейнера позволит адаптировать макет к различным размерам экранов.
Работа с цветом
Цвет фона поможет визуально разграничить разные секции и обеспечить лучшую видимость каждой части содержимого.
<div id="first" style="background-color: #F5DEB3;">...</div>Минимализм в структуре макета
Меньше элементов означает меньше ошибок. Старайтесь использовать как можно меньше обёрток.
Совместимость с браузерами
Регулярно проверяйте, как Flexbox работает в разных браузерах. Используйте префиксы и полифилы для обеспечения поддержки в старых версиях браузеров.
Доработка макета
С помощью инструментов вроде Jsfiddle протестируйте макет и найдите все недочёты до его публикации.
Полезные материалы
- A Complete Guide to Flexbox | CSS-Tricks — подробное руководство по Flexbox.
- flex-grow – CSS | MDN — детальное описание свойства
flex-growи его роли в распределении вертикального пространства. - A Complete Guide to CSS Grid | CSS-Tricks — если вы готовы к работе с сетками, данное руководство по CSS Grid будет весьма полезно.
- CSS Grid Layout — обширное практическое введение в использование CSS Grid.
- Grids – Learn web development | MDN — освойте силу сеток и расширьте свои возможности в верстке.
- Can I use... Support tables for HTML5, CSS3, etc — ресурс для проверки совместимости Flexbox со всеми актуальными браузерами.
- How To Create a Custom Scrollbar — руководство по созданию пользовательской полосы прокрутки для элементов с переполнением содержимого.