@sergyovich2

Как растянуть блок на всю высоту прокрутки, если родитель зафиксирован на 100vh и имеет overflow: auto?

Создал подобие фиксированной страницы с сохранением прокрутки, которая работает через overflow: auto и position: sticky. Теперь мне нужно растянуть зеленый блок (.full-sized) на всю высоту прокрутки. Проблема в том, что родительский блок зафиксирован на высоте 100vh, хотя из-за overflow: auto прокручивается на гораздо бóльшую высоту. Поэтому он перенимает высоту родительского блока, но не содержимого. Может, все-таки возможно растянуть его на всю высоту прокрутки?

<div class="wrapper">
      <div class="container">
        <div class="content"></div>
      </div>
      <div class="full-sized"></div>
    </div>


.wrapper {
  height: 100vh;
  position: relative;
  overflow: auto;
}

.container {
  height: 100%;
  position: sticky;
  top: 0px;
}

.content {
  position: relative;
  height: 2500px;
  background-image: url(http://via.placeholder.com/640x70/);
}

.full-sized {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: green;
}
  • Вопрос задан
  • 44 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы