Cwestiwn cyffredin mewn dylunio gwefan yw "sut ydych chi'n gosod uchder elfen i 100%"?
Gallai hyn ymddangos fel ateb hawdd. Rydych chi'n defnyddio CSS i osod uchder elfen i 100%, ond nid yw hyn bob amser yn ymestyn yr elfen honno i gydweddu â ffenestr y porwr cyfan. Gadewch i ni ddarganfod pam mae hyn yn digwydd a beth allwch chi ei wneud i gyflawni'r arddull weledol hon.
Pixeli a Chanrannau
Pan fyddwch chi'n diffinio uchder elfen gan ddefnyddio eiddo CSS a gwerth sy'n defnyddio picseli, bydd yr elfen honno'n cymryd y gofod fertigol hwnnw yn y porwr.
Er enghraifft, paragraff gydag uchder: 100px; yn cymryd 100 picsel o ofod fertigol yn eich dyluniad. Does dim ots pa mor fwy yw'ch ffenestr porwr, bydd yr elfen hon yn 100 picsel o uchder.
Mae'r canrannau'n gweithio'n wahanol na picsel. Yn ôl manyleb W3C, cyfrifir uchder canran mewn perthynas ag uchder y cynhwysydd. Felly, os ydych chi'n rhoi paragraff gydag uchder: 50%; y tu mewn i ddarn ag uchder o 100px, bydd y paragraff yn 50 picsel o uchder, sef 50% o'i elfen rhiant.
Pam Fethu Canran Uchafswm
Os ydych chi'n dylunio gwefan, ac os oes gennych chi golofn yr hoffech ei gymryd i fyny uchder llawn y ffenestr, mae'r atyniad naturiol yw ychwanegu uchder: 100%; i'r elfen honno. Wedi'r cyfan, os ydych chi'n gosod y lled i led: 100%; bydd yr elfen yn cymryd lle llorweddol llawn y dudalen, felly dylai uchder weithio yr un fath, dde? Yn anffodus, nid yw hyn yn wir o gwbl.
I ddeall pam mae hyn yn digwydd, rhaid i chi ddeall sut mae porwyr yn dehongli uchder a lled. Mae porwyr gwe yn cyfrifo cyfanswm y lled sydd ar gael fel swyddogaeth o ba mor eang y caiff ffenestr y porwr ei agor. Os na fyddwch yn gosod unrhyw werthoedd lled ar eich dogfennau, bydd y porwr yn llifo'r cynnwys yn awtomatig i lenwi lled cyfan y ffenestr (100% o led yw'r diofyn).
Cyfrifir gwerth uchder yn wahanol na lled. Mewn gwirionedd, nid yw porwyr yn gwerthuso uchder o gwbl oni bai fod y cynnwys mor hir ei fod yn mynd y tu allan i'r fynedfa (gan ei gwneud yn ofynnol bod bariau sgrolio) neu os yw'r dylunydd gwe yn gosod uchder absoliwt ar gyfer elfen ar y dudalen. Fel arall, mae'r porwr yn golygu bod y llif yn cynnwys y lled o fewn lled y fynedfa hyd nes y daw i'r diwedd. Nid yw'r uchder wedi'i gyfrifo o gwbl.
Mae problemau'n digwydd pan fyddwch yn gosod uchder canran ar elfen sydd ag elfennau rhiant heb osod uchelder - mewn geiriau eraill, mae gan yr elfennau rhiant uchder diofyn: auto; . Rydych, mewn gwirionedd, yn gofyn i'r porwr gyfrifo uchder o werth heb ei ddiffinio. Gan y byddai hynny'n gyfartal â gwerth di-dâl, y canlyniad yw nad yw'r porwr yn gwneud dim.
Os ydych am osod uchder ar eich tudalennau gwe i ganran, rhaid i chi osod uchder pob elfen rhiant o'r un yr ydych am ei ddiffinio. Mewn geiriau eraill, os oes gennych dudalen fel hyn:
Cynnwys yma
Mae'n debyg y bydd arnoch eisiau i'r div a'r paragraff ynddo gael uchder o 100%, ond mewn gwirionedd mae gan yr adran ddwy elfen riant:
a. Er mwyn diffinio uchder y div i uchder cymharol, rhaid i chi osod uchder y corff a'r elfennau html hefyd.
Felly byddai angen i chi ddefnyddio CSS i osod uchder nid yn unig y div, ond hefyd yr elfennau corff a html. Gall hyn fod yn her, gan eich bod yn gallu cael eich llethu yn gyflym gyda phopeth sy'n cael ei osod i uchder o 100%, dim ond er mwyn cyflawni'r effaith ddymunol hon.
Pethau i'w nodi wrth weithio gyda 100% o uchder
Nawr eich bod chi'n gwybod sut i osod uchder eich elfennau tudalen i 100%, gall fod yn gyffrous mynd allan a gwneud hynny i bob tudalen, ond mae rhai pethau y dylech fod yn ymwybodol ohonynt:
- Gall margins a padio ychwanegu bar sgrolio lle nad ydych chi eisiau un. Un o'r pethau mwyaf blino rwyf wedi eu canfod wrth weithio gydag uchder canran (a lled) yw y gall y padin a'r ymylon ar yr un elfennau hynny ychwanegu bariau sgrolio i'r dudalen, er bod yr holl gynnwys yn arddangos heb fod angen bariau sgrolio. Y rheswm am hyn yw mai uchder neu led yr elfen yw'r peth cyntaf a gyfrifir. Yna ychwanegir yr ymylon a'r paddings. Felly, os oes gennych elfen gydag uchder o 100% ac ymylon uchaf a gwaelod 10 picsel yr un, bydd bar sgrolio ar gyfer y 20 picsel ychwanegol. Cofiwch, mae'r model blwch CSS yn ychwanegu ffin, ffin a padio ar faint elfen, felly bydd 100% gydag unrhyw un o'r gwerthoedd model blwch eraill hynny mewn gwirionedd yn fwy na 100%.
- Os yw'ch cynnwys yn cymryd mwy na'r uchder a ddiffiniwyd, bydd yn trosysgrifio unrhyw beth ar ôl hynny. Mewn geiriau eraill, os oes gennych ddyluniad gyda cholofn sy'n 80% o uchder, a bydd y cynnwys sydd y tu mewn iddi yn cymryd 100% o'r uchder, bydd y 20% ychwanegol yn parhau islaw'r golofn ac yn torri'r dyluniad gweledol o'ch tudalen. Os oes cynnwys o dan y golofn honno, bydd y testun yn ysgrifennu dros ei ben. Rwy'n aml yn gweld hyn yn digwydd pan fydd dylunydd gwe yn ceisio gorfodi uchder y dudalen ac yn ei chael yn gweithio'n berffaith i'w lansio, ond pan fydd cynnwys y dudalen honno yn newid yn y dyfodol, mae eu haderau llwyr yn torri llif y dudalen yn llwyr. Mae hyn bron yn wir pan fyddwch yn adeiladu gwefannau ymatebol y mae'n rhaid eu lled a'u taldra newid â maint y portport.
I wneud hyn, gallwch osod uchder yr elfen hefyd. Os byddwch chi'n ei osod yn awtomatig, bydd bariau sgrolio'n ymddangos os bydd eu hangen ond yn diflannu pan nad ydynt. Mae hynny'n rhwystro'r egwyl gweledol, ond mae'n ychwanegu bariau sgrolio lle nad ydych efallai eu bod eisiau.
Defnyddio Unedau Viewport
Ffordd arall y gallwch chi fynd i'r afael â'r her hon yw arbrofi gydag Unedau Viewport CSS. Drwy ddefnyddio uned mesur uchder y port , gallwch chi elfennau maint i gymryd uchder diffiniedig y portport, a bydd hynny'n newid wrth i'r portport newid! Mae hon yn ffordd wych o gael eich gweledigaethau uchder o 100% ar dudalen ond yn dal i fod yn hyblyg ar gyfer gwahanol ddyfeisiau a maint sgrin.