Как растянуть блок на всю страницу css

Как растянуть блок на всю страницу css

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 6b94bb567d5c2473 • Your IP : 89.162.247.52 • Performance & security by Cloudflare

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

Вопрос по CSS . Задача: есть высокий блок-контейнер, он по высоте не помещается на один экран (например, div , в котором много параграфов), надо задать фон этому блоку-контейнеру, чтобы он был закрашен полностью.

Нашел вот такое решение: задать всем блокам-родителям height: 100%; , а блоку-контейнеру задать min-height: 100%; . Вот пример:

Не понимаю, почему это работает. Похоже на "шаманство". min-height задает минимальную высоту. Получается, что минимальная высота содержимого дива равна 100% высоты содержимого div . Посмотрел в devtools, выяснилось, что div может быть по высоте больше, чем body и html .

Почему это работает?

Потому что div просто переполняет (вылазит за границы) body и всё. Задавая overflow: hidden; для body мы увидим, что div просто обрезается (если высота экрана небольшая).

Как с этим быть?

Это задавание height: 100%; блокам всех уровней вложенности довольно неудобно. Задайте просто нужному вам блоку min-height: 100vh; , где vh — единицы высоты экрана. У body тогда будет по умолчанию height: auto; и body просто будет подстраиваться под содержимое.

Работу min-height: 100% можно понять на примере с установкой прилипающего футера. При этом есть стили:

При этом min-height: 100% работает ТАК:

Если СОДЕРЖИМОГО МАЛО у блока content , то его высота МИНИМАЛЬНО равна 100% высоты вьюпорта ( wrapper — это 100% от высоты body , body — это 100% от высоты html , а html — это 100% от высоты viewport ). При этом у блока content есть нижний paddind -буфер отрицательный, а у блока блока footer есть отрицательный margin , который позволяет в случае, когда много содержимого, "наползти" на этот padding -буфер.

Если же содержимое НЕ ВЛЕЗАЕТ на экран (содержимого МНОГО в блоке content ), то высота определяется содержимым — содержимое растягивает.

Еще раз повторю, чтобы все запомнили — если содержимого мало, высота блока равна высоте вьюпорта (это и есть МИНИМАЛЬНОЕ значение высоты, то есть, меньше быть не может, а больше — пожалуйста, если сможешь растянуть содержимым), если много — высота блока БОЛЬШЕ высоты вьюпорта и определяется содержимым, которое на эту высоту и растягивает.

Как растянуть блок на всю страницу css

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 6b94bb72685b77bb • Your IP : 89.162.247.52 • Performance & security by Cloudflare

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *