Как растянуть блок на всю высоту прокрутки?

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

1. Использование CSS свойства height: 100vh:
В CSS3 введено новое свойство vh, которое позволяет задать высоту элемента в процентах от высоты окна просмотра (viewport height). С помощью height: 100vh вы можете установить высоту блока на 100% высоты окна просмотра, и при прокрутке страницы, блок будет растягиваться на всю высоту прокрутки. Например:

   <style>
     #block {
       height: 100vh;
     }
   </style>

   <div id="block">
     <!-- Ваш контент -->
   </div>

2. Использование CSS свойства position: fixed:
Другой способ состоит в использовании свойства position: fixed вместе с top: 0 и bottom: 0, чтобы зафиксировать блок в верхнем левом углу окна просмотра и растянуть его на всю высоту прокрутки. Например:

   <style>
     #block {
       position: fixed;
       top: 0;
       bottom: 0;
       width: 100%;
     }
   </style>

   <div id="block">
     <!-- Ваш контент -->
   </div>

3. Использование JavaScript:
Если вам требуется более гибкое решение или вам нужно динамически растягивать блок на всю высоту прокрутки, можете использовать JavaScript. С помощью JavaScript вы можете получить высоту окна просмотра и установить высоту блока равной этому значению. Например:

   <script>
     function setBlockHeight() {
       var block = document.getElementById('block');
       var windowHeight = window.innerHeight;
       block.style.height = windowHeight + 'px';
     }
     
     // Вызов функции при загрузке страницы и при изменении размера окна
     window.addEventListener('load', setBlockHeight);
     window.addEventListener('resize', setBlockHeight);
   </script>

   <div id="block">
     <!-- Ваш контент -->
   </div>

Каждый из этих подходов имеет свои преимущества и может быть применен в зависимости от особенностей вашего проекта. Выберите наиболее подходящий способ, и блок будет растянут на всю высоту прокрутки.