Is ceist a d'iarr go coitianta i ndearadh láithreán gréasáin "conas a leagann tú airde eilimint go 100%"?
Is cosúil gur freagra éasca é seo. Úsáideann tú CSS ach airde eilimint a shocrú go 100%, ach ní shíneann sé sin an eilimint sin i gcónaí chun an fhuinneog bhrabhsálaí ar fad a shásamh. Faigh amach cén fáth a tharlaíonn sé seo agus cad is féidir leat a dhéanamh chun an stíl amhairc seo a bhaint amach.
Picteilíní agus Céatadáin
Nuair a shainmhíníonn tú airde eilimint ag baint úsáide as maoin CSS agus luach a úsáideann picteilíní, glacfaidh an eilimint sin an spás i bhfad ingearach sa bhrabhsálaí.
Mar shampla, mír le airde: 100px; tógfaidh sé suas 100 picteilín de spás ingearach i do dhearadh. Ní cuma cé chomh mór is atá do fhuinneog an bhrabhsálaí, beidh an eilimint seo 100 picteilín ar airde.
Tá céatadáin ag obair go difriúil ná picteilíní. De réir an tsonraíocht W3C, déantar céatadáin a ríomh i leith airde an choimeádáin. Mar sin má chuireann tú mír le airde: 50%; taobh istigh de div le airde 100px, beidh 50 mír ar airde ag an mír, arb ionann é agus 50% de na tuismitheora.
Cén fáth nach bhfuil an Céatadán airde
Má tá leathanach gréasáin á dhearadh agat, agus go bhfuil colún agat gur mhaith leat airde iomlán na fuinneoige a thógáil, is é an claonadh nádúrtha airde a chur leis: 100%; leis an ngné sin. Tar éis an tsaoil, má shocraíonn tú an leithead go leithead: 100%; glacfaidh an eilimint spás iomlán cothrománach an leathanaigh, mar sin ba cheart go mbeadh an airde ag obair mar an gcéanna, ceart? Ar an drochuair, níl sé seo ar chor ar bith.
Chun tuiscint a fháil ar an fáth a tharlaíonn sé seo, ní mór duit tuiscint a fháil ar an gcaoi a léiríonn na brabhsálaithe airde agus leithead. Ríomhtar na brabhsálaithe Gréasáin an leithead iomlán atá ar fáil mar fheidhm ar an gcaoi a n-osclaítear an fhuinneog brabhsálaí. Mura luíonn tú aon luachanna leithead ar do chuid doiciméid, sruthóidh an brabhsálaí an t-ábhar go huathoibríoch chun leithead iomlán na fuinneoige a líonadh (is é 100% an leithead réamhshocraithe).
Ríomhtar luach airde ar bhealach difriúil ná leithead. Go deimhin, ní luchtaíonn brabhsálaithe airde ar chor ar bith mura bhfuil an t-ábhar chomh fada is go dtéann sé lasmuigh den amharc (mar sin ní mór barraí scrollbharra) nó má leagann an dearthóir gréasáin airde iomlán le haghaidh eilimint ar an leathanach. Seachas sin, ligeann an bhrabhsálaí go sreabhadh an t-ábhar laistigh de leithead an fhógra go dtí go dtiocfaidh sé chun críche. Níl an airde á ríomh i ndáiríre ar chor ar bith.
Tarlaíonn fadhbanna nuair a leagann tú airde céatadáin ar eilimint a bhfuil tuismitheora ag baint leo gan airde a leagan síos - i bhfocail eile, tá airde réamhshocraithe ag na tuismitheora: uathoibríoch; . Tá tú, i ndáiríre, ag iarraidh ar an mbrabhsálaí airde a ríomh ó luach neamhshainithe. Ós rud é go mbeadh luach neamhíoctha sin ann, is é an toradh nach ndéanann an brabhsálaí rud ar bith.
Más mian leat airde ar do leathanaigh ghréasáin a shocrú go dtí céatadán, caithfidh tú airde gach máthairghné den duine a theastaíonn uait an airde a shainmhíniú a shocrú. I bhfocail eile, má tá leathanach mar seo agat:
Ábhar anseo
Is dócha gur mhaith go mbeadh airde 100% ag an div agus ar an mír ann, ach go bhfuil dhá mháthairghné ag an div:
agus. D'fhonn airde an div a shainmhíniú ar airde coibhneasta, ní mór duit airde an chomhlachta agus na heilimintí html a leagan síos chomh maith.
Mar sin, bheadh ort CSS a úsáid chun airde ní hamháin ar an div, ach freisin ar na heilimintí comhlacht agus html. D'fhéadfadh sé seo a bheith ina dhúshlán, ós rud é gur féidir leat a bheith sásta go tapa le gach rud atá leagtha go dtí airde 100%, ach an éifeacht inmhianaithe seo a bhaint amach.
Rudaí le tabhairt faoi deara nuair a bhíonn tú ag obair le huaire 100%
Anois go bhfuil a fhios agat conas airde do chuid eilimintí leathanach a shocrú go 100%, is féidir go mbeadh sé spreagúil dul amach agus é sin a dhéanamh ar na leathanaigh go léir, ach tá roinnt rudaí ar chóir duit a bheith ar an eolas faoi:
- Is féidir le málaí agus stuáil barra scrollbharra a chur isteach nuair nach bhfuil tú ag iarraidh ceann amháin. Is é ceann de na rudaí is trua a fuair mé le bheith ag obair le céatadáin (agus leithead) ná ansin is féidir leis an stuáil agus imeall ar na heilimintí céanna barraí scrolláin a chur leis an leathanach, cé go léiríonn an t-ábhar go léir gan barraí scrolláin a bheith ag teastáil uait. Tá sé seo toisc go bhfuil airde nó leithead an eilimint an chéad rud a ríomhtar. Ansin cuirtear isteach na corrlaigh agus na paddings. Mar sin, má tá gné agat le airde de 100% agus corrlaigh barr agus bun 10 pixel ar a laghad, beidh barra scrollaithe ann don 20 picteilín breise. Cuimhnigh, cuireann an tsamhail bosca CSS corrlach, teorainn agus stuáil ar mhéid eilimint, agus mar sin beidh 100% ar aon cheann de na luachanna samhail eile bosca sin níos mó ná 100%.
- Má ghlacann d'ábhar níos mó ná an airde sainithe, déanfaidh sé aon rud a athscríobh ina dhiaidh. I bhfocail eile, má tá dearadh agat le colún atá 80% ar airde, agus déanfaidh an t-ábhar atá taobh istigh de 100% den airde, go leanfaidh 20% breise faoi bhun an cholúin agus an dearadh amhairc a bhriseadh de do leathanach. Má tá ábhar faoi bhun an cholúin sin, scríobhfaidh an téacs go simplí os cionn an cholúin. Is minic a fheiceann sé seo nuair a dhéantar iarracht ar dhearthóir gréasáin airde leathanach a chur i bhfeidhm agus go bhfaighidh sé ag obair go foirfe le seoladh, ach nuair a athraíonn an t-ábhar ar an leathanach sin sa todhchaí, bíonn sreabhadh an leathanaigh go hiomlán ag a n-airde iomlána. Tá sé seo fíor i gcónaí nuair a bhíonn tú ag tógáil láithreáin ghréasáin atá freagrach a bhfuil a n-airde agus a n-airde ag athrú le méid an dearcta.
Chun seo a shocrú, is féidir leat airde an eilimint a leagan síos chomh maith. Má shocraíonn tú go huathoibríoch, beidh barraí scrolláin le feiceáil má tá gá leo ach go n-imíonn siad nuair nach bhfuil siad. Socraíonn sé sin an sos amhairc, ach cuireann sé barra scrollaithe áit nach féidir leat iad a iarraidh.
Ag baint úsáide as Aonaid Viewport
Bealach eile is féidir leat dul i ngleic leis an dúshlán seo ná triail a bhaint as Aonaid Viewport CSS. Trí úsáid a bhaint as aonad tomhais airde an dearcta , is féidir leat eilimintí méide chun airde sainithe den dearcadh a ghlacadh, agus athróidh sé sin de réir mar a athraíonn an dearcadh! Is bealach iontach é seo do radhairc airde 100% a fháil ar leathanach ach fós iad a bheith solúbtha le haghaidh feistí éagsúla agus méideanna scáileáin.