В статье рассмотрим как создать страницы полной высоты с фиксированной боковой панелью и прокручиваемой областью содержимого. Веб-страницы с фиксированной боковой панелью и областью прокручиваемого контента довольно популярны. Страница расширяется до 100% высоты экрана. В зависимости от высоты боковая панель и содержимое могут иметь полосы прокрутки.
Такие страницы обычно используются в административных разделах, на страницах документации.
Создание такой страницы включает 5 элементов контейнера:
- Основной внешний контейнер - он увеличится до 100% высоты экрана;
- Контейнер для хранения боковой панели - это также расширится до 100% высоты экрана;
- Контейнер для содержания - также расширяется до 100% высоты экрана;
- Контейнер для содержания содержимого боковой панели - он будет содержать содержимое главной боковой панели;
- Контейнер для хранения основного содержимого;
HTML
Код
<div id="paneldesayu">
<div id="ksirovan-bokovoy">
<!-- Содержание боковой панели -->
<div id="ksirovan-bokovoy-content" style="height: 2855px"></div>
</div><!--
--><div id="prokruchivayem">
<!-- Основное содержание -->
<div id="main-content" style="height: 1800px"></div>
</div>
</div>
используется для удаления пробела между двумя элементами inline-block.
CSS
Код
#paneldesayu {
height: 100%;
}
#ksirovan-bokovoy {
background-color: #2980b9;
display: inline-block;
vertical-align: top;
height: 100%;
width: 18%;
overflow: auto;
}
#prokruchivayem {
background-color: #f5eded;
display: inline-block;
vertical-align: top;
height: 100%;
width: 85%;
overflow: auto;
}
Важно установить высоту html и body body как 100%, где в итоге высота контейнера наследуется от его родителя, что если родительский объект не занимает 100% высоты экрана, установка высоты дочернего элемента в значение 100% ничего не даст.
Демонстрация
