Для создания резинового блока с высотой, которая будет автоматически подстраиваться под размер окна браузера, можно использовать CSS свойство height и относительные единицы измерения, такие как проценты или vh (viewport height).
1) Использование процентов:
Можно задать высоту блока, указав ее в процентах от высоты родительского элемента или контейнера. Например, если вы хотите, чтобы блок занимал 50% высоты окна браузера, вы можете установить следующее правило CSS:
.block {
height: 50%;
}
2) Использование vh:
vh представляет собой единицу измерения, которая представляет 1% высоты окна просмотра (viewport). Это означает, что 100vh будет соответствовать полной высоте окна браузера. Например:
.block {
height: 100vh;
}
3) Использование комбинации процентов и vh:
Вы также можете использовать комбинированный подход, указав высоту блока смешанным способом, например, 50% высоты окна браузера и оставшиеся 50% в vh:
.block {
height: 50%;
min-height: 50vh;
}
Это позволит блоку занимать 50% высоты окна браузера и, при необходимости, расширяться до 50vh.
4) Использование CSS Grid или Flexbox:
Вы также можете использовать CSS Grid или Flexbox для создания резиновых макетов. Оба метода предоставляют различные способы управления размерами и высотами блоков, включая резиновую высоту.
Например, в случае использования CSS Grid вы можете установить grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));, что позволит блокам автоматически растягиваться в соответствии с размером окна браузера.
Также можно использовать align-items: stretch; в Flexbox для растягивания блоков по высоте родительского элемента.
В итоге, для создания резинового блока с высотой, которая автоматически подстраивается под размер окна браузера, можно использовать различные подходы, в зависимости от ваших потребностей и предпочтений.