Kā iestatīt HTML elementa augstumu līdz 100%

Visbiežāk uzdotais jautājums mājas lapas dizains ir "kā jūs iestatāt elementa augstumu līdz 100%"?

Tas var šķist vienkārša atbilde. Jūs vienkārši izmantojat CSS, lai elementa augstumu iestatītu līdz 100%, taču tas ne vienmēr stiept šo elementu, lai tas atbilstu visam pārlūkprogrammas logam. Noskaidrosim, kāpēc tas notiek un ko jūs varat darīt, lai sasniegtu šo vizuālo stilu.

Pikseļi un procenti

Ja jūs definējat elementa augstumu, izmantojot CSS īpašumu un vērtību, kurā tiek izmantoti pikseļi, pārlūkā šis elements pārlūkā aizņems tik daudz vertikālās vietas. Piemēram, ar punktu a

augstums: 100 pikseļi;

jūsu dizainā aizņems 100 pikseļu vertikālo vietu. Neatkarīgi no tā, cik lielāks ir jūsu pārlūkprogrammas logs, šis elements būs 100 pikseļu augstumā.

Procentuāli atšķiras no pikseļiem. Saskaņā ar W3C specifikāciju procentuālās augstumu aprēķina attiecībā pret konteinera augstumu. Tātad, ja jūs ievietojat punktu ar

augstums: 50%;
iekšpusē div ar augstumu 100 pikseļi, punkts būs 50 pikseļi augstumā, kas ir 50% no tā vecāka elementa.

Kāpēc procentuālās augstuma defekts

Ja veidojat tīmekļa lapu un jums ir kolonna, kurā vēlaties izmantot loga visu augstumu, dabiskais slīpums ir pievienot

augstums: 100%;
uz šo elementu. Galu galā, ja jūs iestatāt

platums
uz

platums: 100%;
elements aizņems pilnu lapas horizontālo platību, tādēļ

augstums
vajadzētu strādāt vienādi, vai ne? Diemžēl tas tā nav.

Lai saprastu, kāpēc tas notiek, jums ir jāsaprot, kā pārlūkprogrammas interpretē augstumu un platumu. Tīmekļa pārlūkprogrammas aprēķina kopējo pieejamo platumu atkarībā no pārlūkprogrammas loga atvēršanas platuma.

platums
Ja dokumentos neiekļaujat nekādas vērtības, pārlūkprogramma automātiski iepludinās saturu, lai aizpildītu visu loga platumu (100% platums ir noklusējums).

Augstuma vērtība tiek aprēķināta atšķirīgi no platuma. Faktiski pārlūkprogrammas vispār nevērtē augstumu, ja saturs nav tik ilgs, ka tas atrodas ārpus skata punkta (tādējādi nepieciešams ritināšanas joslas) vai arī, ja tīmekļa izstrādātājs nosaka lapas absolūto elementu.

augstums
Pretējā gadījumā pārlūkprogramma vienkārši ļauj satura plūsmu skata punkta platumā, līdz tā beigās. Augstums faktiski netiek aprēķināts.

Problēmas rodas, ja iestatāt procentuālo augstumu elementam, kuram ir iestatīti vecākie elementi bez augstuma - citiem vārdiem sakot, vecākiem elementiem ir noklusējums.

augstums: auto;
Patiesībā jūs lūdzat pārlūkprogrammai aprēķināt augstumu no nenoteiktas vērtības. Tā kā tas būtu vienāds ar nulles vērtību, rezultāts ir tāds, ka pārlūkprogramma nedara neko.

Ja vēlaties iestatīt augstumu savās tīmekļa lapās procentos, jums ir jānosaka augstums katrs vecākais elements no tā, kuru vēlaties noteikt augstumu. Citiem vārdiem sakot, ja jums ir šāda lapa:

Saturs šeit
Jūs, iespējams, vēlaties

Div
un punkts tajā, lai būtu 100% augstums, bet ka div faktiski ir divi vecākie elementi:

un. Lai noteiktu augstumu

Div
uz relatīvo augstumu, jums ir jānosaka augstums

ķermenis
un

html
elementi, kā arī. Tātad jums būs nepieciešams izmantot CSS, lai iestatītu augstumu ne tikai div, bet arī ķermeņa un HTML elementus. Tas var būt izaicinājums, jo jūs varat ātri pārvarēt visu, kas iestatīts uz 100% augstumu, tikai lai sasniegtu vēlamo efektu.

Dažas lietas, kas jāņem vērā, strādājot ar 100% augstumu

Tagad, kad jūs zināt, kā iestatīt lapas elementu augstumu līdz 100%, var būt aizraujoši iziet un to darīt visās jūsu lapās, taču ir dažas lietas, kas jāzina:

Maržas un polsterējums var pievienot ritjoslu, kurā jūs to nevēlaties.Viena no visvairāk kaitinošajām lietām, ko esmu atradis, strādājot ar procentuālo augstumu (un platumu), ir tāda, ka tad, kad šie paši elementi var tikt piestiprināti, var pievienot rullīšu joslas, lai gan viss saturs tiek parādīts bez nepieciešamības izvēlēties ritjoslu. Tas ir tāpēc, ka elementa augstums vai platums ir pirmā lieta, ko aprēķina. Tad tiek pievienotas maržas un spilventiņi. Tātad, ja jums ir elements ar 100% augstumu un katra augšējā un apakšējā robeža ir 10 pikseļi, papildus 20 pikseļiem būs ritjosla. Atcerieties, ka CSS kastīšu modelis pieļauj elementa izmēru lielumu, robežu un polsterējumu, tāpēc 100% ar jebkuru citu kastītes modeļa vērtību faktiski būs vairāk nekā 100%.

Ja jūsu saturs aizņem vairāk par noteikto augstumu, tas pēc tam to pārraksta.Citiem vārdiem sakot, ja jums ir dizains ar kolonnu, kura augstums ir 80%, un tajā esošais saturs aizņem 100% no augstuma, tad papildu 20% turpinās zem kolonnas un pārtrauks vizuālo dizainu no jūsu lapas. Ja zem šīs slejas ir saturs, teksts vienkārši tiks ierakstīts tā augšpusē. Es bieži to redzu, kad tīmekļa izstrādātājs mēģina piespiest lapas augstumu un izpaužas tā, ka tā darbojas pilnīgi, lai to palaistu, bet, ja saturs šajā lapā mainās nākotnē, to absolūtie augstumi pilnīgi pārtrauc lapas plūsmu. Tas ir divkārši taisnība, kad veidojat atsaucīgas vietnes, kuru platums un augstums ir jāmaina, ņemot vērā skatu punkta izmēru.

Lai to novērstu, varat arī iestatīt elementa augstumu. Ja jūs to iestatījāt

auto,
Ritjoslas parādīsies, ja tie būs nepieciešami, bet izzudīs, ja tie nav.Tas novērš vizuālo pārtraukumu, bet tajā tiek pievienotas ritjoslas, kurās jūs tos nevēlaties.

Izmantojot Viewport vienības

Vēl viens veids, kā jūs varat atrisināt šo problēmu, ir eksperimentēt ar CSS Viewport vienībām. Izmantojot skatu punkta augstuma mērvienību, izmēra elementi var pārslēgties uz noteikto redzes punkta augstumu, un tas mainīsies, mainoties skata lapai! Tas ir lielisks veids, kā iegūt jūsu 100% augstumu vizuālo materiālu lapā, taču tie joprojām ir elastīgi dažādām ierīcēm un ekrāna izmēriem.