Не знаю як у кого, але в мене періодично виникають проблеми з тим, щоб веб-сторінка займала всю висоту екрану. У мене є div, який я хочу, щоб розтягувався на всю висоту сторінки. Але він не розтягується. Чому? Сьогодні, я, разом з вами, спробую в цьому розібратися.
Припустимо, у нас є такий HTML:
І такий CSS (в файлі style.css):
Ви можете відкрити цей HTML в браузері, щоб побачити, що div не розтягнувся на всю висоту сторінки, хоча ми і вказали "height: 100%;" в CSS. Чому запитаєте ви?
Справа в тому, що HTML це просто набір контейнерів, вкладених один в одного. На нашій сторінці є кореневої контейнер , в ньому міститься
, а в ньому, в свою чергу, контейнер
. Коли ми поміщаємо контент в один з контейнерів, він (і все контейнери його містять) розтягуються так, щоб вмістити свій контент. Тобто, коли ми вставляємо текст в
, він розтягується, і відповідно розтягує всі контейнери в яких він знаходиться (в нашому випадки і ).
Коли ми додаємо правило "min-height: 100%;" до
. ми по-суті вказуємо диву, що він повинен розтягнутися на всю висоту містить його контейнера. В даному прикладі, це контейнер . Таким чином, контейнер
став займати 100% висоти контейнера . Тепер виникає питання, а який висоти контейнер ? Насправді, такий як. оскільки інше не було зазначено! Тобто, по суті, додавання стилю "min-height: 100%;"
вказує йому бути такої ж висоти, як він є.
Таким чином, для того, щоб домогтися бажаного результату, необхідно збільшити висоту контейнера
. Тут ми стикаємося з тією ж проблемою в контейнері - його висота дорівнює висоті ! Таким чином, для того, щоб виправити проблему (тобто змусити контейнер
розтягнутися на всю висоту сторінки), нам необхідно, вказати контейнерів і , щоб вони займали всю висоту сторінки.
Тобто, поміняти CSS на наступний:
В результаті отримаємо, що вміст займе всю висоту сторінки. Важливий факт, якщо вміст має висоту більшу, ніж висота сторінки, то з'явиться смуга прокрутки. Для цього замість height: 100%; в останньому рядку використано min-height: 100% ;. В іншому випадки, вміст обривалася б в кінці сторінки.
Схожі статті
