Kaip nustatyti HTML elemento aukštį iki 100%

Dažniausiai užduodamas svetainės dizaino klausimas yra "kaip jūs nustatote elemento aukštį iki 100%"?

Tai gali atrodyti kaip lengvas atsakymas. Jūs paprasčiausiai naudojate CSS, norėdami nustatyti elemento aukštį iki 100%, bet tai ne visada išplečia šį elementą, kad jis atitiktų visą naršyklės langą. Leiskite sužinoti, kodėl taip nutinka ir ką galite padaryti, kad pasiektumėte šį vaizdinį stilių.

Pikseliai ir procentai

Kai nustatote elemento aukštį naudodami CSS savybę ir vertę, kuri naudoja pikselius, tas elementas naršyklėje užims daug vertikalios erdvės. Pavyzdžiui, pastraipa su

aukštis: 100 pikselių;

savo dizainu užims 100 pikselių vertikalios erdvės. Nesvarbu, koks didesnis jūsų naršyklės langas, šis elementas bus 100 pikselių aukščio.

Procentai dirba skirtingai nei pikseliai. Pagal W3C specifikaciją, procentinis aukštis apskaičiuojamas atsižvelgiant į konteinerio aukštį. Taigi, jei jūs įtraukėte pastraipą su

aukštis: 50%;
Viduje, kurio aukštis yra 100 pikselių, pastraipa bus 50 pikselių aukščio, ty 50% jo pagrindinio elemento.

Kodėl procentų aukščio nepavyksta?

Jei kuriate tinklalapį ir turite stulpelį, kuriame norite užpildyti visą lango aukštį, natūralus polinkis yra pridėti

aukštis: 100%;
prie šio elemento. Galų gale, jei jūs nustatote

plotis
į

plotis: 100%;
elementas užims visą horizontalią puslapio erdvę, taigi

aukštis
turėtų dirbti tuo pačiu, ar ne? Deja, taip nėra.

Norėdami suprasti, kodėl taip nutinka, turite suprasti, kaip naršyklės interpretuoja aukštį ir plotį. Interneto naršyklės apskaičiuoja visą turimą plotį kaip funkciją, kiek atidaromas naršyklės langas.

plotis
Jei nenustatysite jokių vertybių savo dokumentuose, naršyklė automatiškai sukurs turinį, kad užpildytų visą lango plotį (numatytasis yra 100% plotis).

Aukščio vertė apskaičiuojama skirtingai nei plotis. Tiesą sakant, naršyklės apskritai neįvertina aukščio, nebent turinys yra toks ilgas, kad jis eina už peržiūros srities ribų (taigi reikalauja slinkties juostų) arba jei interneto dizaineris nustato puslapio elemento absoliučią reikšmę.

aukštis
Priešingu atveju naršyklė paprasčiausiai leidžia srautą matyti peržiūros srities plotyje, kol jis pasibaigs. Aukštis apskritai nėra apskaičiuotas.

Problemos atsiranda, kai nustatote procentinį aukštį elemente, kurio pagrindiniai elementai nenustatyti aukščių - kitaip tariant, tėvų elementai turi numatytąsias reikšmes.

aukštis: auto;
Iš tikrųjų esate paprašę naršyklės apskaičiuoti aukštį nuo neapibrėžtos vertės. Kadangi tai būtų lygi nulio vertei, rezultatas yra tas, kad naršyklė nieko nedaro.

Jei norite nustatyti aukštį savo tinklalapiuose procentais, turite nustatyti aukštį kiekvienas pagrindinis elementas, kurio norėtumėte nustatyti aukštį. Kitaip tariant, jei turite tokį puslapį:

Turinys čia
Tikriausiai tu nori

divas
ir jo dalis turi 100% aukštį, bet tas divis iš tikrųjų turi du pagrindiniai elementai:

ir Norėdami nustatyti aukštį

divas
santykiniam aukščiui, turite nustatyti aukštį

kūnas
ir

html
elementai taip pat. Taigi, jums reikės naudoti CSS, norėdami nustatyti ne tik divo, bet ir kūno bei HTML elementų aukštį. Tai gali būti iššūkis, nes jūs galite greitai įstrigti, jei viskas bus 100% aukščio, kad pasiektumėte pageidaujamą efektą.

Kai kurie dalykai, į kuriuos reikia atkreipti dėmesį, kai dirbate su 100% aukščio

Dabar, kai žinote, kaip nustatyti puslapio elementų aukštį iki 100%, gali būti įdomu išeiti ir tai padaryti visais savo puslapiais, tačiau yra keletas dalykų, kuriuos turėtumėte žinoti:

Margins and padding galite pridėti slinkties juostą, kur to nenorite.Vienas iš labiausiai erzinančių dalykų, kuriuos radau dirbdamas su procentais esančių aukščių (ir pločių), yra tai, kad tada tų pačių elementų įklijavimas ir parašai gali pridėti slinkties juostas prie puslapio, net jei visas turinys rodomas nenaudojant slinkties juostų. Taip yra todėl, kad elemento aukštis ar plotis yra pirmasis apskaičiuotas dalykas. Tada įterpiamos maržos ir padėkliukai. Taigi, jei turite elementą, kurio aukštis yra 100%, o kiekvieno viršutinė ir apatinė kraštai yra 10 pikselių, papildomų 20 pikselių yra slinkties juostos. Atminkite, kad CSS dėžės modelis prideda maržą, sieną ir užpildą į elemento dydį, taigi 100% su bet kuriuo iš kitų langelių modelio verčių iš tikrųjų bus daugiau nei 100%.

Jei jūsų turinys užtrunka daugiau nei nustatytas aukštis, po jo jis bus perrašytas.Kitaip tariant, jei jūs turite dizainą su stulpeliu, kurio aukštis yra 80%, o turinys, kuris yra jo viduje, užims 100% aukščio, tai papildomi 20% bus toliau po stulpeliu ir pertraukos vizualinio dizaino savo puslapio. Jei šiame stulpelyje yra turinio, tekstas tiesiog bus parašytas virš jo. Aš dažnai tai matai, kai web dizaineris bando priversti puslapio aukštį ir paleidžia jį puikiai, tačiau, kai turinys šiame puslapyje keičiasi ateityje, jų absoliutus aukštis visiškai sulaužo puslapio srautą. Tai yra dvigubai tiesa, kai pastatote jautrias svetaines, kurių plotis ir aukštis turi keistis atsižvelgiant į peržiūros srities dydį.

Norėdami išspręsti šią problemą, galite nustatyti elemento aukštį. Jei jį nustatysite

automatinis,
rodyklės pasirodys, jei jos bus reikalingos, bet išnyks, kai jos nebus.Tai sutvarko vizualinę pertrauką, tačiau ji prideda slinkties juostas, kur jūs nenorite jų.

"Viewport" vienetų naudojimas

Kitas būdas, kaip išspręsti šią problemą, yra eksperimentuoti su CSS "Viewport" vienetais. Naudodami peržiūros srities aukščio matavimo vienetą, dydžio elementai gali užimti nustatytą peržiūros srities aukštį, o tai pasikeis, kai keičiasi peržiūros sritis! Tai puikus būdas pasiekti 100% aukščio vaizdo įrašus puslapyje, tačiau jie vis tiek turi būti lankstūs skirtingiems įrenginiams ir ekranų dydžiui.