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, punkts ar augstumu: 100 pikseļi; jūsu dizains aizņem 100 pikseļu vertikālo vietu. Nav svarīgi, 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 augstumu: 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, kurai vēlaties aizvērt loga visu augstumu, dabiskais slīpums ir pievienot augstumu: 100%; uz šo elementu. Galu galā, ja jūs iestatāt platumu līdz platumam: 100%; elements aizņems visu lapas horizontālo platību, tāpēc augstumam vajadzētu vienādi darboties, 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. Ja dokumentos neiekļaujat platuma vērtības, pārlūkprogramma automātiski izplūdīs saturu, lai aizpildītu visu loga platumu (100% platums ir noklusējums).
Augstuma vērtība tiek aprēķināta atšķirīgi nekā platums. Faktiski pārlūkprogrammas vispār nevērtē augstumu, ja saturs nav tik ilgs, ka tas atrodas ārpus skatpunkta (tādējādi nepieciešams ritjoslu) vai arī, ja tīmekļa izstrādātājs nosaka lapas absolūto augstumu. 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, kam ir iestatīti vecākie elementi bez augstuma - citiem vārdiem sakot, galvenajiem elementiem ir noklusējuma 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 katra vecāka elementa augstums noteiktā augstumā. Citiem vārdiem sakot, ja jums ir šāda lapa:
Saturs šeit
Jūs, iespējams, vēlaties, lai div un tā punkts būtu 100% augstums, bet divam faktiski ir divi vecāki elementi:
un. Lai definētu div augstumu relatīvam augstumam, jums ir jānosaka arī ķermeņa augstums un html elementi.
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 atklājusi, strādājot ar procentuālo augstumu (un platumu), ir tāda, ka tad, kad šie vieni elementi var tikt pievienoti, var pievienot rullīšu joslas, lai gan viss saturs tiek rādīts bez nepieciešamības ritināt lentes. 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āt automātiski, parādās rullīšu joslas, ja tās ir nepieciešamas, bet pazūd, ja tās 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.