Как да настроите височината на HTML елемент на 100%

Често задаван въпрос в дизайна на уебсайтове е "как да настроите височината на даден елемент на 100%"?

Това може да изглежда като лесен отговор. Можете просто да използвате CSS, за да зададете височината на елемент на 100%, но това не винаги се простира, за да се побере в целия прозорец на браузъра. Нека да разберем защо се случва това и какво можете да направите, за да постигнете този визуален стил.

Пиксели и проценти

Когато дефинирате височината на елемент, използващ собствеността CSS и стойност, която използва пиксели, този елемент ще заема толкова много вертикално пространство в браузъра. Например, параграф с a

височина: 100px;

ще заемат 100 пиксела вертикално пространство във вашия дизайн. Няма значение колко по-голям е браузърът ви, този елемент ще бъде с височина 100 пиксела.

Процентът работи по различен начин от пикселите. Съгласно спецификацията на W3C процентните височини се изчисляват по отношение на височината на контейнера. Така че, ако поставите параграф с a

височина: 50%;
в рамките на div с височина 100px, параграфът ще бъде 50 пиксела височина, което е 50% от основния елемент.

Защо процентните височини не са успели

Ако проектирате уеб страница и имате колона, която искате да заемате с пълната височина на прозореца, естественият наклон е да добавите

височина: 100%;
към този елемент. В края на краищата, ако зададете

широчина
да се

ширина: 100%;
елементът ще заема цялото хоризонтално пространство на страницата, така че

височина
трябва да работи същото, нали? За съжаление, това изобщо не е така.

За да разберете защо се случва това, трябва да разберете как браузърите интерпретират височината и ширината. Уеб браузърите изчисляват общата налична ширина, като функция на това колко широк е прозорецът на браузъра.

широчина
Ако не зададете никакви стойности в документите си, браузърът автоматично ще поток съдържанието, за да запълни цялата ширина на прозореца (100% ширина е по подразбиране).

Стойността на височината се изчислява по различен начин от ширината. В действителност, браузърите изобщо не оценяват височината, освен ако съдържанието не е толкова дълго, че излиза извън прозореца за показване (така че се изискват ленти за превъртане) или ако уеб дизайнерът задава абсолютен елемент на страницата.

височина
В противен случай, браузърът просто позволява потока на съдържанието в рамките на ширината на прозореца за показване, докато не достигне края си. Височината изобщо не се изчислява.

Проблеми възникват, когато зададете процентна височина на елемент, който съдържа родителски елементи без високи стойности - с други думи, родителските елементи имат по подразбиране.

височина: автоматично;
Вие всъщност искате от браузъра да изчисли височина от недефинирана стойност. Тъй като това би се равнявало на нулева стойност, резултатът е, че браузърът не прави нищо.

Ако искате да зададете височина на уеб страниците си с процент, трябва да зададете височината на всеки родителски елемент от този, който искате дефинираната височина. С други думи, ако имате страница по този начин:

Съдържание тук
Вероятно искате

Разделение
и параграф в нея да има 100% височина, но това всъщност има две родителски елементи:

и. За да определите височината на

Разделение
до относителна височина, трябва да зададете височината на

тяло
и

HTML
и елементи. Така че ще трябва да използвате CSS, за да зададете височината не само на div, но и на тялото и HTML елементи. Това може да бъде предизвикателство, тъй като можете бързо да се претоварите с всичко, което е настроено на 100% височина, само за да постигнете желания ефект.

Някои неща, които трябва да обърнете внимание, когато работите със 100% височини

Сега, когато знаете как да зададете височината на елементите на страницата си на 100%, може да бъде вълнуващо да излезете и да направите това на всичките си страници, но има няколко неща, които трябва да сте наясно:

Маржините и подложките могат да добавят лента за превъртане, в която не искате.Едно от най-досадните неща, които съм открила при работа с процентни височини (и ширини) е, че след това подложката и полетата на същите тези елементи могат да добавят ленти за превъртане към страницата, въпреки че цялото съдържание се показва без да се налагат превъртащи ленти. Това е така, защото височината или ширината на елемента е първото нещо, което се изчислява. След това се добавят полетата и педалите. Така че, ако имате елемент с височина 100% и горна и долна граница от по 10 пиксела, ще има лента за превъртане на допълнителните 20 пиксела. Не забравяйте, че моделът на CSS кутията добавя марж, граница и подложка върху размера на даден елемент, така че 100% с която и да е от тези други стойности на кутия модел всъщност ще бъде повече от 100%.

Ако съдържанието ви заема повече от определената височина, то ще презапише всичко след него.С други думи, ако имате дизайн с колона, която е с 80% височина, а съдържанието, което е вътре в нея, ще заема 100% от височината, а останалите 20% ще продължат под колоната и ще нарушат визуалния дизайн на вашата страница. Ако има съдържание под тази графа, текстът просто ще напише над него. Често виждам, че това се случва, когато уеб дизайнер се опитва да принуди височината на страницата и да я изпълни перфектно за стартиране, но когато съдържанието на тази страница се промени в бъдеще, абсолютната им височина напълно нарушава потока на страницата. Това е двойно вярно, когато изграждате отговорни уебсайтове, чиято ширина и височина трябва да се променят с размера на изгледа.

За да коригирате това, можете да зададете и височината на елемента. Ако го зададете

Автоматичен,
ще се появят превъртащи ленти, ако те са необходими, но изчезват, когато не са.Това поправя визуалното пречупване, но добавя и превъртащи ленти, където може да не ги искате.

Използване на елементи от Viewport

Друг начин да се справите с това предизвикателство е да експериментирате с CSS Viewport Units. Чрез използването на измервателната единица на височината на изгледа, можете да размерите елементи, за да заемате определена височина на прозореца за преглед и това ще се промени, когато прозорецът за прозорци се промени! Това е чудесен начин да получите визуализацията на 100% височина на дадена страница, но все пак да имате гъвкавост за различни устройства и размери на екрана.