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ščiu: 100 pikselių; jūsų dizainas užims 100 pikselių vertikalios erdvės. Nepriklausomai nuo to, kaip 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 įtraukiate pastraipą su aukščiu: 50%; Viduje, kurio aukštis 100 pikselių aukštyje, pastraipa bus 50 pikselių aukščio, tai yra 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ūraliu slenksiu reikia pridėti aukštį: 100%; prie šio elemento. Galų gale, jei nustatysite pločio plotį: 100%; elementas užims visą horizontalią puslapio erdvę, todėl aukštis turėtų veikti vienodai, 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. Jei nenustatysite jokių dokumentų pločio reikšmių, naršyklė automatiškai sukurs turinį, kad užpildytų visą lango plotį (numatytasis yra 100% plotis).
Aukščio vertė apskaičiuojama kitaip 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ą aukštį. 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 kyla, kai nustatote procentinį aukštį elemente, kurio pagrindiniai elementai nenustatyti aukštyje - kitaip tariant, tėvų elementai turi numatytąsias aukštis: automatinis; . 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 kiekvieno tėvo elemento aukštį, kurio norėtumėte nustatyti aukštį. Kitaip tariant, jei turite tokį puslapį:
Turinys čia
Tikriausiai norėtumėte, kad div ir jo dalis būtų 100% aukščio, tačiau div turi du pagrindinius elementus:
ir Norint nustatyti div aukštį santykiniam aukščiui, turite nustatyti kūno aukštį ir html elementus.
Taigi, jums reikės naudoti CSS, norėdami nustatyti ne tik divo aukštį, bet ir kūno ir html elementus. 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ų užpildas ir paraštės gali pridėti slinkties juostas į puslapį, 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 automatiškai, bus rodomos slinkties juostos, 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.