• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Фиксированная боковая панель на HTML и CSS (Создание страницы полной высоты с боковой панелью)
Фиксированная боковая панель на HTML и CSS
Kosten
Дата: Суббота, 2019-08-10, 22:32 | Сообщение 1
Администраторы
Сообщений:24295
Награды: 56


В статье рассмотрим как создать страницы полной высоты с фиксированной боковой панелью и прокручиваемой областью содержимого. Веб-страницы с фиксированной боковой панелью и областью прокручиваемого контента довольно популярны. Страница расширяется до 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% ничего не даст.

Демонстрация
Прикрепления: 8363907.jpg(6.4 Kb) · sidebar-content.zip(0.5 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Фиксированная боковая панель на HTML и CSS (Создание страницы полной высоты с боковой панелью)
  • Страница 1 из 1
  • 1
Поиск: