Често задаван въпрос в дизайна на уебсайтове е "как да настроите височината на даден елемент на 100%"?
Това може да изглежда като лесен отговор. Можете просто да използвате CSS, за да зададете височината на елемент на 100%, но това не винаги се простира, за да се побере в целия прозорец на браузъра. Нека да разберем защо се случва това и какво можете да направите, за да постигнете този визуален стил.
Пиксели и проценти
Когато дефинирате височината на елемент, използващ собствеността CSS и стойност, която използва пиксели, този елемент ще заема толкова много вертикално пространство в браузъра.
Например, параграф с височина: 100px; ще заемат 100 пиксела вертикално пространство във вашия дизайн. Няма значение колко по-голям е браузърът ви прозорец, този елемент ще бъде 100 пиксела височина.
Процентът работи по различен начин от пикселите. Съгласно спецификацията на W3C процентните височини се изчисляват по отношение на височината на контейнера. Така че, ако поставите параграф с височина: 50%; в рамките на div с височина 100px, параграфът ще бъде 50 пиксела височина, което е 50% от неговия родителски елемент.
Защо процентните височини не са успели
Ако проектирате уеб страница и имате колона, която искате да заемате с пълната височина на прозореца, естественият наклон е да добавите височина: 100%; към този елемент. В края на краищата, ако зададете ширината до ширината: 100%; елементът ще заема цялото хоризонтално пространство на страницата, така че височината трябва да работи еднакво, нали? За съжаление, това изобщо не е така.
За да разберете защо се случва това, трябва да разберете как браузърите интерпретират височината и ширината. Уеб браузърите изчисляват общата налична ширина, като функция на това колко широк е прозорецът на браузъра. Ако не зададете никакви стойности за ширината на документите си, браузърът автоматично ще тече съдържанието, за да запълни цялата ширина на прозореца (100% ширина е по подразбиране).
Стойността на височината се изчислява по различен начин от ширината. Всъщност браузърите изобщо не оценяват височината, освен ако съдържанието не е толкова дълго, че излиза извън прозореца за показване (което изисква скролерни ленти) или ако уеб дизайнерът задава абсолютна височина за елемент на страницата. В противен случай, браузърът просто позволява потока на съдържанието в рамките на ширината на прозореца за показване, докато не достигне края си. Височината изобщо не се изчислява.
Проблеми възникват, когато зададете процентна височина на елемент, който има родителски елементи без натоварени стойности - с други думи, родителските елементи имат височина по подразбиране: автоматично; , Вие всъщност искате от браузъра да изчисли височина от недефинирана стойност. Тъй като това би се равнявало на нулева стойност, резултатът е, че браузърът не прави нищо.
Ако искате да зададете височина на уеб страниците си с процент, трябва да зададете височината на всеки родителски елемент от този, за който искате да определите височината. С други думи, ако имате страница по този начин:
Съдържание тук
Вероятно искате div и параграфът в него да имат 100% височина, но div всъщност има два основни елемента:
и. За да определите височината на div с относителна височина, трябва да зададете и височината на тялото и html елементите.
Така че ще трябва да използвате CSS, за да зададете височината не само на div, но и на body и html елементи. Това може да бъде предизвикателство, тъй като можете бързо да се претоварите с всичко, което е настроено на 100% височина, само за да постигнете желания ефект.
Някои неща, които трябва да обърнете внимание, когато работите със 100% височини
Сега, когато знаете как да зададете височината на елементите на страницата си на 100%, може да бъде вълнуващо да излезете и да направите това на всичките си страници, но има няколко неща, които трябва да сте наясно:
- Маржините и подложките могат да добавят лента за превъртане, в която не искате. Едно от най-досадните неща, които съм открил при работа с процентни височини (и ширини) е, че след това подложката и полетата на същите тези елементи могат да добавят ленти за превъртане към страницата, въпреки че цялото съдържание се показва без да е необходимо да се показват ленти за превъртане. Това е така, защото височината или ширината на елемента е първото нещо, което се изчислява. След това се добавят полетата и педалите. Така че, ако имате елемент с височина 100% и горна и долна граница от по 10 пиксела, ще има лента за превъртане на допълнителните 20 пиксела. Не забравяйте, че моделът на CSS кутията добавя марж, граница и подложка върху размера на даден елемент, така че 100% с която и да е от тези други стойности на кутия модел всъщност ще бъде повече от 100%.
- Ако съдържанието ви заема повече от определената височина, то ще презапише всичко след него. С други думи, ако имате дизайн с колона, която е с 80% височина, а съдържанието, което е вътре в нея, ще заема 100% от височината, а останалите 20% ще продължат под колоната и ще нарушат визуалния дизайн на вашата страница. Ако има съдържание под тази графа, текстът просто ще напише над него. Често виждам, че това се случва, когато уеб дизайнер се опитва да принуди височината на страницата и да я изпълни перфектно за стартиране, но когато съдържанието на тази страница се промени в бъдеще, абсолютната им височина напълно нарушава потока на страницата. Това е двойно вярно, когато изграждате отговорни уебсайтове, чиято ширина и височина трябва да се променят с размера на изгледа.
За да коригирате това, можете да зададете и височината на елемента. Ако го зададете автоматично, ще се появят ленти за превъртане, ако са необходими, но изчезват, когато не са. Това поправя визуалното пречупване, но добавя и превъртащи ленти, където може да не ги искате.
Използване на елементи от Viewport
Друг начин да се справите с това предизвикателство е да експериментирате с CSS Viewport Units. Чрез използването на измервателната единица на височината на изгледа, можете да размерите елементи, за да заемате определена височина на прозореца за преглед и това ще се промени, когато прозорецът за прозорци се промени! Това е чудесен начин да получите визуализацията на 100% височина на дадена страница, но все пак да имате гъвкавост за различни устройства и размери на екрана.