Jak ustawić wysokość elementu HTML na 100%

Często zadawanym pytaniem w projekcie strony jest "jak ustawić wysokość elementu na 100%"?

To może wydawać się łatwą odpowiedzią. Po prostu użyj CSS, aby ustawić wysokość elementu na 100%, ale nie zawsze powoduje to rozciągnięcie tego elementu tak, aby pasowało do całego okna przeglądarki. Dowiedzmy się, dlaczego tak się dzieje i co możesz zrobić, aby osiągnąć ten styl wizualny.

Piksele i wartości procentowe

Podczas definiowania wysokości elementu za pomocą właściwości CSS i wartości wykorzystującej piksele, ten element zajmie tyle miejsca w pionie w przeglądarce. Na przykład akapit z

wysokość: 100 pikseli;

zajmie 100 pikseli pionowej przestrzeni w twoim projekcie. Nie ma znaczenia, jak duże jest okno przeglądarki, ten element będzie miał 100 pikseli wysokości.

Procenty działają inaczej niż piksele. Zgodnie ze specyfikacją W3C, wysokości procentowe są obliczane w odniesieniu do wysokości kontenera. Więc jeśli umieścisz akapit z

wysokość: 50%;
wewnątrz elementu div o wysokości 100 pikseli akapit będzie miał 50 pikseli wysokości, co stanowi 50% jego elementu nadrzędnego.

Dlaczego wysokość procentowa się nie udała

Jeśli projektujesz stronę internetową i masz kolumnę, którą chcesz objąć całą wysokość okna, naturalnym nachyleniem jest dodanie

wysokość: 100%;
do tego elementu. W końcu, jeśli ustawisz

szerokość
do

szerokość: 100%;
element zajmie całą poziomą przestrzeń strony, więc

wysokość
powinien działać tak samo, prawda? Niestety tak nie jest.

Aby zrozumieć, dlaczego tak się dzieje, musisz zrozumieć, w jaki sposób przeglądarki interpretują wysokość i szerokość. Przeglądarki internetowe obliczają całkowitą dostępną szerokość w zależności od szerokości okna przeglądarki.

szerokość
Jeśli nie ustawisz żadnych wartości na dokumentach, przeglądarka automatycznie przepełni zawartość, aby wypełnić całą szerokość okna (domyślną wartością jest szerokość 100%).

Wartość wysokości obliczana jest inaczej niż szerokość. W rzeczywistości przeglądarki nie oceniają wysokości w ogóle, chyba że zawartość jest tak długa, że wykracza poza obszar wyświetlania (co wymaga pasków przewijania) lub gdy projektant stron internetowych ustala bezwzględny dla elementu na stronie.

wysokość
W przeciwnym razie przeglądarka po prostu przepuszcza treść na szerokość okna ekranu, dopóki nie dojdzie do końca. Wysokość wcale nie jest obliczana.

Problemy pojawiają się, gdy ustawiasz procentową wysokość elementu, który ma elementy rodzica bez ustawionych wysokości - innymi słowy, elementy nadrzędne mają domyślną wartość.

height: auto;
W efekcie prosisz przeglądarkę, by obliczyła wysokość od niezdefiniowanej wartości. Ponieważ będzie to równa wartości zerowej, wynikiem jest to, że przeglądarka nie robi nic.

Jeśli chcesz ustawić wysokość na swoich stronach internetowych do wartości procentowej, musisz ustawić wysokość każdy element macierzysty tego, który chcesz zdefiniować wysokość. Innymi słowy, jeśli masz stronę podobną do tej:

Treść tutaj
Prawdopodobnie chcesz

div
a akapit w nim ma 100% wzrostu, ale ten div faktycznie ma dwa elementy nadrzędne:

i. Aby określić wysokość

div
do względnej wysokości, musisz ustawić wysokość

ciało
i

html
także elementy. Więc musisz użyć CSS, aby ustawić wysokość nie tylko div, ale także elementów ciała i HTML. Może to stanowić wyzwanie, ponieważ szybko można przytłoczyć wszystko ustawione na 100% wysokości, aby osiągnąć ten pożądany efekt.

Niektóre rzeczy warte uwagi podczas pracy ze 100% wysokością

Teraz, gdy wiesz, jak ustawić wysokość elementów strony na 100%, może być ekscytującym wyjście i zrobienie tego na wszystkich twoich stronach, ale jest kilka rzeczy, o których powinieneś wiedzieć:

Marginesy i dopełnienie mogą dodawać pasek przewijania tam, gdzie go nie ma.Jedną z najbardziej irytujących rzeczy, które znalazłem przy pracy z procentowymi wysokościami (i szerokościami), jest to, że dopełnienie i marginesy na tych samych elementach mogą dodawać paski przewijania do strony, nawet jeśli cała zawartość jest wyświetlana bez pasków przewijania. Wynika to z faktu, że wysokość lub szerokość elementu jest pierwszą obliczoną wartością. Następnie dodawane są marginesy i paddings. Jeśli masz element o wysokości 100% i górnych i dolnych marginesach po 10 pikseli, pojawi się pasek przewijania z dodatkowymi 20 pikselami. Pamiętaj, że model pudełkowy CSS dodaje margines, obramowanie i dopełnienie do rozmiaru elementu, więc 100% z dowolną z pozostałych wartości modelu pudełkowego będzie w rzeczywistości większe niż 100%.

Jeśli twoja zawartość zajmuje więcej niż zdefiniowana wysokość, nadpisze wszystko po niej.Innymi słowy, jeśli masz projekt z kolumną, która ma 80% wysokości, a zawartość, która jest w środku, zajmie 100% wysokości, to dodatkowe 20% będzie kontynuowane pod kolumną i przerwie projekt graficzny twojej strony. Jeśli zawartość znajduje się poniżej tej kolumny, tekst będzie po prostu pisać nad nią. Często zdarza się tak, gdy projektant stron internetowych próbuje wymusić wysokość strony i uruchamia ją idealnie do uruchomienia, ale gdy treść na tej stronie zmieni się w przyszłości, jej bezwzględne wysokości całkowicie przełamią przepływ strony. Jest to podwójnie prawdziwe, gdy budujesz responsywne strony internetowe, których szerokość i wysokość muszą się zmieniać wraz z wielkością widocznego obszaru.

Aby to naprawić, możesz także ustawić wysokość elementu. Jeśli ją ustawisz

automatyczny,
paski przewijania pojawią się, jeśli są potrzebne, ale znikają, gdy nie są.To naprawia wizualne pęknięcie, ale dodaje paski przewijania tam, gdzie możesz ich nie chcieć.

Używanie jednostek rzutni

Innym sposobem na pokonanie tego wyzwania jest eksperymentowanie z jednostkami rzutni CSS. Korzystając z jednostki miary wysokości widocznego obszaru, możesz zmieniać wielkość elementów, aby uzyskać zdefiniowaną wysokość widoku, która zmieni się wraz ze zmianą widoku! To świetny sposób, by uzyskać wydruki o wysokości 100% na stronie, ale nadal zapewniać elastyczność w przypadku różnych urządzeń i rozmiarów ekranu.