Hiji patarosan nu ilahar ditanya dina rarancang ramatloka nyaeta "kumaha Anjeun nyetel jangkungna unsur pikeun 100%"?
Ieu mungkin sigana kawas jawaban gampang. Anjeun saukur make CSS pikeun ngeset jangkungna unsur ka 100%, tapi ieu teu salawasna manteng unsur nu pikeun nyocogkeun sakabéh jandéla browser. Hayu urang manggihan naha ieu kajadian jeung naon tiasa ngalakukeun pikeun ngahontal gaya visual ieu.
Piksel na percentages
Lamun anjeun nangtukeun jangkungna unsur ngagunakeun harta CSS sarta nilai anu ngagunakeun piksel Unsur anu bakal nyandak up nu spasi nangtung jauh di browser nu.
Contona, hiji ayat kalawan jangkungna: 100px; bakal butuh nepi 100 piksel ruang nangtung di design.It anjeun henteu masalah kumaha gedé jandela browser anjeun Unsur ieu bakal 100 piksel dina jangkungna.
Percentages dianggo béda ti piksel. Numutkeun spésifikasi W3C, jangkung persentase anu diitung kalawan hormat ka jangkungna wadahna urang. Ku kituna lamun nunda ayat kalawan jangkungna: 50%; jero hiji div kalawan jangkungna 100px ayat bakal jadi 50 piksel dina jangkungna, nu 50% éta indungna unsur.
Naha Perséntase Karyadi gagal
Lamun nuju ngarancang Kalurahan a, sarta anjeun gaduh kolom nu dipilampah nyandak up jangkungna pinuh ku jandela, nu inclination alam nyaéta pikeun nambahkeun jangkungna: 100%; mun unsur éta. Barina ogé, lamun disetél lebar mun lebar: 100%; unsur bakal nyandak nepi rohangan horizontal pinuh kaca, jadi jangkungna kedah dianggo sami, katuhu? Hanjakal, ieu teu masalahna pisan.
Ngartos naha ieu kajadian, Anjeun kedah ngartos kumaha panyungsi naksir jangkungna jeung lebar. Web panyungsi ngitung lebar total aya salaku fungsi tina sabaraha lega jandéla browser dibuka. Mun anjeun teu diatur sagala nilai lebar kana dokumén anjeun, browser anu otomatis bakal ngalir eusi ngeusian sakabéh rubak jandela (100% lebar nya standar éta).
nilai jangkungna diitung béda ti lebar. Kanyataanna, panyungsi ulah evaluate jangkungna pisan iwal eusi téh jadi lila eta mana luar tina viewport nu (sahingga merlukeun ngagugulung bar) atanapi upami nu desainer web susunan hiji jangkungna mutlak pikeun unsur dina kaca. Upami teu kitu, browser anu saukur ngidinan aliran eusi dina rubak viewport nepika datang ka tungtungna. jangkungna henteu sabenerna diitung sakabehna.
Masalah lumangsung nalika geus disetel perséntase jangkungna kana unsur anu boga elemen indungna tanpa jangkung diatur - dina basa sejen, elemen indungna boga jangkungna standar: otomatis; . Anjeun, dina pangaruh, nanyakeun browser pikeun ngitung jangkungna tina hiji nilai undefined. Kusabab éta bakal sarua a hypothesis-nilai, hasilna nyaéta yén browser nu teu nanaon.
Lamun hayang nyetél jangkungna dina kaca web anjeun ka persentase, Anjeun kudu ngeset jangkungna unggal unsur indungna tina salah rék jangkungna tangtu. Kalayan kecap séjén, lamun boga kaca kawas kieu:
eusi didieu
Anjeun kamungkinan hoyong div jeung ayat dina ka boga jangkungna 100% tapi nu div sabenerna boga dua elemen indungna:
na. Dina raraga nangtukeun jangkungna div ka jangkungna relatif, Anjeun kudu ngeset jangkungna awak jeung html unsur ogé.
Jadi maneh bakal perlu make CSS pikeun ngeset jangkungna henteu mung div, tapi ogé awak jeung html unsur. Ieu tiasa tangtangan, saprak anjeun bisa gancang meunang overwhelmed kalawan sagalana keur disetel ka% jangkungna 100, ukur pikeun ngahontal éfék ieu nu dimaksud.
Sababaraha Hirup mun Catetan Nalika Gawe sareng 100% Karyadi
Ayeuna nu nyaho kumaha carana ngeset jangkungna elemen kaca anjeun ka 100%, eta tiasa seru mun balik kaluar jeung ngalakukeun nu ka sadaya kaca anjeun, tapi aya sababaraha hal nu kudu sadar tina:
- Margins na padding bisa nambah hiji bar ngagugulung dimana anjeun teu hayang hiji. Salah sahiji hal nu paling bangor Kuring geus kapanggih kalawan gawé bareng jangkung persentase (jeung lebaran) éta mangka padding na margins on pamadegan elemen sarua bisa nambahkeun ngagugulung bar ka kaca, sanajan sakabeh mintonkeun eusi tanpa needing ngagugulung bar. Ieu kusabab jangkungna atawa rubak unsur nyaéta hal kahiji anu diitung. Mangka margins na paddings nu ditambahkeun kana. Ku kituna lamun boga unsur jeung jangkungna 100% na luhur tur margins handap unggal 10 piksel, aya bakal ngagugulung bar keur tambahan 20 piksel. Inget, model kotak CSS nambihan margin, wates, sarta padding onto ukuran tina unsur, jadi 100% kalawan salah sahiji pamadegan nilai kotak model sejen bakal sabenerna jadi leuwih ti 100%.
- Lamun eusi Anjeun nyokot up leuwih ti jangkungna tangtu, éta bakal nimpa nanaon sanggeus eta. Kalayan kecap séjén, lamun boga rarancang ku kolom nu geus 80% dina jangkungna, sarta kandungan anu geus jero eta bakal butuh nepi 100% jangkung, éta tambahan 20% baris nuluykeun handap kolom jeung megatkeun disain visual kaca anjeun. Mun aya eusi handap kolom anu, téks nu saukur bakal nulis leuwih luhureun eta. Kuring mindeng ningali ieu kajadian lamun desainer web nyoba maksakeun jangkungna kaca sarta meunang deui gawé sampurna pikeun peluncuran, tapi lamun eusi dina éta parobahan kaca di mangsa ka hareup, jangkung mutlak maranéhna sagemblengna megatkeun aliran kaca. Ieu doubly leres nalika anjeun ngawangun situs web responsif anu lebar tur jangkungna kudu ngaganti ku ukuran tina viewport nu.
Pikeun ngalereskeun ieu, Anjeun tiasa nyetel jangkungna unsur ogé. Mun geus disetel ka otomatis, gulung bar bakal muncul mun maranéhna téh diperlukeun tapi ngaleungit nalika aranjeunna henteu. Anu nangtukeun putus visual, tapi nambihan scrollbars dimana anjeun bisa jadi teu hayang éta.
Ngagunakeun Unit Viewport
Cara séjén bisa tackle tantangan ieu ékspérimén kalawan CSS Viewport Unit. Ku ngagunakeun Unit jangkungna viewport ukur, Anjeun tiasa elemen ukuranana nyandak up jangkungna diartikeun of viewport, sarta anu bakal ngaganti salaku parobahan viewport! Ieu cara gede meunang 100% visuals jangkungna Anjeun dina kaca tapi masih boga aranjeunna jadi fleksibel pikeun beda jeung nu sejen tur ukuran layar.