Учимся создавать подконтент с помощью Scroll

Привет всем, это мой первый блог. Сегодня я хотел бы поделиться своим опытом в разработке моего личного проекта. В своем проекте я хочу сделать подконтент, который будет иметь полосу прокрутки, но высота этого контента будет 100% к оставшемуся пространству родительской высоты. Высота родителя зависит от размера области просмотра.

После некоторого поиска решения я обнаружил, что для того, чтобы подконтент заполнял оставшееся пространство родительской высоты, мы можем использовать flex-box и изменить направление flex на column. Одна проблема решена.

Следующая проблема — как сделать так, чтобы только вложенный контент имел полосу прокрутки, а родительский (body) — нет. Наконец-то я нашел решение, узнав о переполнении. Новое, что я узнал здесь, это то, что если мы обернули наш подконтент div для контейнера, мы должны установить для обоих контейнеров и дочерних элементов нашего тела значение overflow.

И чтобы мой подконтент имел автоматическую прокрутку, а его высота зависела от оставшейся высоты родителя.

Вот html-код:

<div class="container">
  <div class="box-container">
    <div class="box">
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
    </div>
  </div>  
</div>
Вход в полноэкранный режим Выйти из полноэкранного режима

И следующий css:

.container {
  box-sizing: border-box;
  height: 100vh;
  background-color: #f5f5f5;
  border: 2px solid red;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.box-container {
  overflow-y: auto;
  display: flex;
}

.box {
  overflow-y: auto;
  flex:1;
  height:auto;
  background-color: yellow;
}

.list {
  height: 200px;
  border: 2px solid green;
  margin-bottom: 2px;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Спасибо, что прочитали и извините за мой плохой английский. Продолжайте в том же духе для тех, кто находит проблемы в кодировании 💪.

Оцените статью
Procodings.ru
Добавить комментарий