Miten HTML-elementin korkeus asetetaan 100 prosenttiin

Yleisesti kysytty verkkosivustojen suunnittelussa on "kuinka määrität elementin korkeuden 100 prosenttiin"?

Tämä saattaa tuntua helpolta. Yksinkertaisesti CSS: n avulla elementin korkeus voidaan asettaa 100 prosenttiin, mutta tämä ei aina kiristä sitä elementtiä koko selaimen ikkunaan. Selvitetään, miksi näin tapahtuu ja mitä voit tehdä tämän visuaalisen tyylin saavuttamiseksi.

Pikseleitä ja prosenttiosuuksia

Kun määrität elementin korkeuden käyttämällä CSS-ominaisuutta ja pikseliä käyttävää arvoa, kyseinen elementti vie selaimen tuon paljon pystytasoa. Esimerkiksi kappale, jossa on a

korkeus: 100px;

vie 100 pikseliä pystysuoraan tilaan suunnittelussa. Sillä ei ole väliä kuinka suuri selainikkunasi on, tämä elementti on 100 pikseliä.

Prosentit toimivat eri tavoin kuin pikselit. W3C-spesifikaation mukaan prosenttiosuudet lasketaan suhteessa säiliön korkeuteen. Joten jos laitat kappaleen a

korkeus: 50%;
sisällä div, jonka korkeus on 100px, kohta on 50 pikseliä korkeampi, joka on 50% sen emoelementistä.

Miksi prosentuaaliset korkeudet epäonnistuvat

Jos suunnittelet verkkosivua ja sinulla on sarake, jonka haluat ottaa koko ikkunan kokoon, luonnollinen kaltevuus on lisätä

korkeus: 100%;
siihen osaan. Loppujen lopuksi, jos asetat

leveys
että

leveys: 100%;
elementti vie sivun koko vaakasuoran tilan, joten

korkeus
pitäisi toimia samoin, eikö? Valitettavasti näin ei ole lainkaan.

Jotta ymmärtäisit, miksi näin tapahtuu, sinun on ymmärrettävä, miten selaimet tulkitsevat korkeutta ja leveyttä. Web-selaimet laskevat käytettävissä olevan leveyden kokonaisuudessaan sen mukaan, kuinka leveä selainikkuna on avattu.

leveys
Jos et aseta arvoja dokumentteihisi, selaimen sisältö kulkee automaattisesti koko ikkunan leveyden täyttämiseksi (100% leveys on oletusarvo).

Korkeusarvo lasketaan eri tavalla kuin leveys. Itse asiassa selaimet eivät arvioi korkeutta ollenkaan, ellei sisältö ole niin pitkä, että se menee katselukulman ulkopuolelle (mikä vaatii vierityspalkkeja) tai jos web-suunnittelija asettaa absoluuttisen elementin sivulle.

korkeus
Muuten selain yksinkertaisesti sallii sisällön virtauksen näkymän leveyteen, kunnes se loppuu. Korkeutta ei ole lainkaan laskettu lainkaan.

Ongelmia ilmenee, kun asetat prosenttiyksikön korkeuden elementtiin, jolla on emoliittiset elementit ilman korkeuksia - toisin sanoen vanhempiin elementteihin on oletusarvo.

korkeus: auto;
Olet itse asiassa pyytänyt selaimen laskea korkeuden määrittämästä arvosta. Koska tämä olisi yhtä kuin nolla-arvo, seurauksena on, että selain ei tee mitään.

Jos haluat asettaa sivulle korkeuden prosentteina, sinun on asetettava korkeus joka jonka korkeus on määritetty. Toisin sanoen, jos sinulla on tällainen sivu:

Sisältö tässä
Olet todennäköisesti haluat

div
ja sen kohta on 100% korkeus, mutta se div on todella kaksi peruselementit:

ja. Jotta määritettäisiin korkeus

div
suhteelliseen korkeuteen, sinun on asetettava korkeus

ruumis
ja

html
elementtejä. Joten sinun pitäisi käyttää CSS-asetusta asettamaan korkeuden paitsi div, mutta myös kehon ja HTML-elementtejä. Tämä voi olla haaste, koska voit nopeasti päästä ylitse, kun kaikki asetetaan 100% korkeuteen, vain tämän halutun vaikutuksen saavuttamiseksi.

Jotkut asiat, jotka huomioidaan käytettäessä 100% korkeuksia

Nyt kun tiedät, kuinka sivusi elementtien korkeus on 100%, voi olla jännittävää mennä ulos ja tehdä sen kaikilla sivuillasi, mutta on muutamia asioita, joista sinun pitäisi tietää:

Margot ja pehmuste voivat lisätä vierityspalkin, johon et halua sitä.Yksi ärsyttävistä asioista, joita olen löytänyt prosenttiosuuksilla (ja leveyksillä), on se, että tällöin samojen elementtien pehmuste ja marginaalit voivat lisätä vierityspalkkeja sivulle, vaikka kaikki sisältö näkyy vierittämättä. Tämä johtuu siitä, että elementin korkeus tai leveys on ensimmäinen laskettava asia. Sitten lisätään marginaalit ja tasoitteet. Joten jos sinulla on elementti, jonka korkeus on 100% ja ylä- ja alamarginaalit kumpikin 10 pikseliä, ylimääräisten 20 pikselin vierityspalkki. Muista, että CSS-laatikkomalli lisää marginaalin, reunuksen ja täytön elementin kokoon, joten 100% jollakin näistä muista laatumallin arvoista on tosiasiassa yli 100%.

Jos sisältösi ylittää määritetyn korkeuden, se korvaa sen jälkeen sen.Toisin sanoen, jos sinulla on 80% korkean pylvään muotoinen rakenne, jonka sisältämä sisältö vie 100% korkeudesta, ylimääräinen 20% jatkuu sarakkeen alapuolelle ja murtaa visuaalisen suunnittelun sivusi. Jos sarakkeen alapuolella on sisältöä, teksti kirjoitetaan yksinkertaisesti yläosaan. Näen usein tämän, kun web-suunnittelija yrittää pakottaa sivun korkeuden ja saa sen toimimaan täydellisesti käynnistääksesi, mutta kun sivun sisältö muuttuu tulevaisuudessa, niiden absoluuttiset korkeudet rikkovat täysin sivun kulkua. Tämä on kaksinpelnistä, kun rakennat reagoivia verkkosivustoja, joiden leveys ja korkeus on vaihdettava katselukulman koon mukaan.

Voit korjata tämän valitsemalla elementin korkeuden. Jos asetat sen

auto,
vierityspalkit näkyvät, jos niitä tarvitaan, mutta katoavat, kun niitä ei ole.Se korjaa visuaalisen tauon, mutta se lisää vierityspalkkeja, joihin et ehkä halua niitä.

Viewport-yksiköiden käyttäminen

Toinen tapa, jolla voit ratkaista tämän haasteen, on kokeilla CSS Viewport -yksiköitä. Näkymän korkeusmittayksikön avulla voit koota elementtejä, jotka ottavat tietyn korkeuden näkymästä ja muuttuvat näkymän muuttuessa! Tämä on hieno tapa saada 100% visuaaliset grafiikkasi sivulta, mutta silti ne ovat joustavia eri laitteille ja näytön koot.