Pitakonan sing umum ditakoni ing desain website yaiku "kepiye sampeyan nyetel dhuwur elemen nganti 100%"?
Iki minangka jawaban gampang. Sampeyan mung nggunakake CSS kanggo nyetel dhuwur elemen nganti 100%, nanging iki ora tansah ngliwati elemen sing pas kabeh jendhela browser. Ayo ngerteni kenapa iki kedadean lan apa sampeyan bisa nindakake kanggo entuk gaya visual iki.
Piksel lan Persen
Nalika sampeyan nemtokake dhuwur saka sawijining unsur kanthi nggunakake properti CSS lan nilai sing migunakake piksel, unsur kasebut bakal njupuk papan sing akeh vertikal ing browser.
Contone, paragraf kanthi dhuwur: 100px; bakal njupuk 100 piksel spasi vertikal ing design.It sampeyan ora ketompo carane luwih gedhe jendhela browser sampeyan, unsur iki bakal dadi 100 piksel.
Persen gumantung beda saka piksel. Miturut spesifikasi W3C, tingkat persentase diitung bab dhuwur wadah. Dadi yen sijine paragraf kanthi dhuwur: 50%; nang div karo dhuwur 100px, paragraf bakal 50 piksel, sing 50% saka unsur induk iku.
Kenapa Percentage Heights Fail
Yen sampeyan lagi ngrancang kaca web, lan sampeyan duwe kolom sing pengin ngunggahake dhuwur jendhela, kecenderungan alam kanggo nambah dhuwur: 100%; kanggo unsur kasebut. Sawise kabeh, yen nyetel jembar nganti jembar: 100%; unsur bakal njupuk ruang horisontal lengkap, supaya dhuwur kudu bisa uga, bener? Sayange, iki ora kaya kabeh.
Kanggo mangerteni apa sing kedadeyan iki, sampeyan kudu mangerteni carane browser nerangake dhuwur lan jembaré. Browser web ngétung total jembar sing kasedhiya minangka fungsi babagan jendhela browser sing dibukak. Yen sampeyan ora nemtokake apa-apa jembar ing dokumen sampeyan, browser bakal mlebu kanthi otomatis isi jembaré kabèh jendhela (jembaré 100% standar).
Nilai dhuwur diwilang kanthi beda saka jembar. Ing kasunyatan, browser ora ngevaluasi dhuwur ing kabeh kajaba isi kasebut supaya dawa supaya metu saka viewport (saéngga mbutuhake garis gulung) utawa yen perancang web nemtokake dhuwur sing mutlak kanggo sawijining unsur ing kaca kasebut. Yen ora, browser mung ngijini aliran isi ing jembaré viewport nganti tekan pungkasan. Dhuwuré ora dikira-kira banget.
Masalah kedaden nalika sampeyan ngatur persentase dhuwur ing unsur sing nduweni unsur induk tanpa dhuwur - ing tembung liya, unsur induk duwe dhuwur standar: otomatis; . Sampeyan, kanthi efektif, takon browser kanggo ngétung dhuwur saka nominasi ora ditemtokake. Wiwit iku bakal padha karo nilai-nol, pranyata browser ora nindakake apa-apa.
Yen sampeyan pengin nyetel dhuwur ing kaca web menyang persentase, sampeyan kudu nyetel dhuwur saben unsur induk sing sampeyan pengin dhuwur ditetepake. Ing tembung liyane, yen sampeyan duwe kaca kaya iki:
Isi kene
Sampeyan mungkin pengin div lan paragraf kasebut duwe dhuwur 100%, nanging div bener duwe loro unsur induk:
lan. Kanggo nemtokake ketinggian div menyang dhuwur relatif, sampeyan kudu nyetel dhuwur awak lan unsur html uga.
Supaya sampeyan kudu nggunakake CSS kanggo nyetel dhuwur ora mung div, nanging uga unsur html lan awak. Iki bisa dadi tantangan, amarga sampeyan bisa kanthi gampang entuk kabeh sing disetel nganti 100% dhuwur, mung kanggo entuk efek sing dikarepake.
Sawetara Wigati Kanggo Nganggo 100% Heights
Saiki sampeyan ngerti carane nyetel dhuwur elemen kaca menyang 100%, bisa nyenengake kanggo metu lan nglakoni apa wae kanggo kabeh kaca, nanging ana sawetara hal sing kudu sampeyan deleng:
- Margin lan padding bisa nambah baris gulung ing ngendi sampeyan ora pengin. Salah sawijining sing paling ngganggu aku nemokake kanthi nggarap dhuwur persentase (lan jembatan) yaiku sing banjur padding lan jembatan ing unsur sing padha bisa nambah bar gulung menyang kaca, sanajan kabeh tampilan isi tanpa perlu nggulung bar. Iki amarga dhuwur utawa jembar elemen kasebut minangka bab pisanan sing diwilang. Banjur pinggiran lan paddling ditambahake. Dadi yen sampeyan duwe unsur kanthi dhuwur 100% lan pinggir ndhuwur lan ngisor saben 10 piksel, bakal ana baris gulung kanggo 20 piksel ekstra. Elinga, model kothak CSS nambah wates, wates, lan padding ing ukuran elemen, supaya 100% karo samubarang nilai model kothak liyane bakal bener-bener luwih saka 100%.
- Yen isi sampeyan njupuk luwih saka dhuwur sing didéfinisi, bakal ngilangi apa waé sawise. Ing tembung liyane, yen sampeyan duwe desain kanthi kolom sing dhuwuré 80%, lan isi sing ana ing njero bakal njupuk 100% saka dhuwur, sing 20% ekstra bakal terus ing ngisor kolom lan ngilangi desain visual saka kaca sampeyan. Yen ana isi ngisor kolom kasebut, teks mung bakal ditulis ing ndhuwur. Aku kerep ndeleng iki nalika desainer web nyoba kanggo ngetokake dhuwur-dhuwur kaca lan nate bisa digunakake kanthi becik kanggo diluncurake, nanging nalika isi ing kaca kasebut diowahi ing mangsa ngarep, dhuwuré sing mutlak bakal ngilangi aliran kaca. Iki bener bener nalika sampeyan mbangun situs web responsif, sing jembar lan dhuwur kudu diganti karo ukuran tampilan.
Kanggo ndandani iki, sampeyan bisa nyetel dhuwur unsur kasebut. Yen nyetel otomatis, bar nggulung bakal katon yen perlu nanging ilang nalika lagi ora. Sing mbecikake break visual, nanging nambah scrollbar sing sampeyan ora pengin.
Nggunakake Unit Viewport
Cara liya sing bisa sampeyan tackle tantangan iki yaiku kanggo eksprimen karo CSS Viewport Units. Kanthi nggunakake pangukuran dhuwur ukuran layar, sampeyan bisa ngukur ukuran elemen sing didéfinisi ing viewport, lan bakal owah dadi owah-owahan viewport! Iki minangka cara sing apik kanggo nggoleki 100% visual sing dhuwur ing kaca, nanging isih kudu fleksibel kanggo piranti lan ukuran layar sing beda.