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, jonka korkeus on 100px; vie 100 pikseliä pystysuorasta tilasta suunnittelussa. Ei ole väliä, kuinka suuri on selainikkunasi, 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 korkeuteen: 50%; sisällä div, jonka korkeus on 100px, kappale on korkeudeltaan 50 pikseliä, joka on 50% sen emo-elementistä.
Miksi prosentuaaliset korkeudet epäonnistuvat
Jos suunnittelet verkkosivua, ja sinulla on sarake, jonka haluat ottaa koko ikkunan kokoiseksi, luonnollinen kaltevuus on lisätä korkeus: 100%; siihen osaan. Loppujen lopuksi, jos asetat leveyden: 100%; elementti vie sivun koko vaakasuoran tilan, joten korkeus pitäisi toimia samalla tavalla, 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. Jos et aseta leveysarvoja dokumentteihisi, selaimen sisältö kulkee automaattisesti koko ikkunan koko leveyden täyttämiseksi (100% leveys on oletusarvo).
Korkeusarvo lasketaan eri tavoin kuin leveys. Itse asiassa selaimet eivät arvioi korkeutta lainkaan, ellei sisältö ole niin pitkä, että se menee katselukulman ulkopuolelle (mikä vaatii vierityspalkkeja) tai jos web-suunnittelija asettaa absoluuttisen korkeuden sivulle. 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 elementille, jolla on emoliittiset elementit ilman korkeuksia - toisin sanoen vanhempiin elementteihin on oletuskorkeus: 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 korkeuden verkkosivuillesi prosenttiyksikköön, sinun on määritettävä jokaisen korkeimmalle määritetyn korkeuden korkeus. Toisin sanoen, jos sinulla on tällainen sivu:
Sisältö tässä
Olet todennäköisesti haluat, että div ja sen kappaleessa on 100% korkeus, mutta että divilla on itse asiassa kaksi emoliitettä:
ja. Jotta div pituus määritettäisiin suhteelliseksi korkeudeksi, sinun on myös asetettava kehon ja html-elementtien korkeus.
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 ilman vierityspalkkeja. 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 automaattisesti, vierityspalkit tulevat näkyviin, 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.