ZorNet.Ru — сайт для вебмастера » HTML и CSS » Создать div блок сайта с прокруткой на CSS

Создать div блок сайта с прокруткой на CSS

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

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

При проверке на работоспособность:

Прокрутка внутри модального блока при помощи CSS

HTML

Код

<div class="tegelou-sometu-ngempon">
  <div class="kisacons-derations">
  <h2>ZorNet.Ru - сайт вебмастера</h2>
  <p>Здесь будет описание внутри окна</p>
</div>
</div>

CSS

Код

.tegelou-sometu-ngempon {
  width: 475px;
  height: 89vh;
  border: 1px solid grey;
  border-radius:7px;
  padding:5px 0 0 9px;
}

.kisacons-derations {
  width: 475px;
  height: 89vh;
  overflow: auto;
}

.kisacons-derations h2 {
  font-size: 2em;
}

  .kisacons-derations p {
  margin: 9px 0 18px;
  font-size: 15px;
  line-height: 1.5;
}

Здесь добавлены только элементы, что отвечают за работу, что также есть тема для оформление.

Демонстрация

11 Октября 2018 Просмотров: 1287 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0