In gemiddelde fraach yn 'e webside ûntwerp is "hoe lizze jo de hichte fan in elemint op 100%"?
Dit kin as in maklike antwurd fine. Jo brûke allinich CSS om de hichte fan in elemint op 100% te setten, mar dit stelt dit elemint net altyd út om it hiele finster fan 'e browser te passen. Litte wy fine wêrom't dit bart en wat jo kinne dwaan om dizze fisuele styl te berikken.
Pixels en persintaazjes
As jo de hichte fan in elemint ynstelle mei de CSS-eigenskip en in wearde dy't pixels brûket, sil dit elemint in folle vertike romte yn 'e browser hawwe.
Bygelyks in paragraaf mei in hichte: 100px; sil 100 pixels fan fertikale romte opnimme yn jo ûntwerp. It makket gjin spraak hoe grutter jo blêder finster is, dit elemint sil 100 pixels yn 'e hichte wêze.
Persintaazje wurkje oars as piksels. Neffens de spesifikaasje fan W3C wurde persintaazje hichten berekkene mei respekt foar de hichte fan de kontener. Dus as jo in paragraaf mei in hichte sette: 50%; binnen in div mei in hichte fan 100px, de paragraaf sil 50 piksels yn hichte wêze, wat 50% fan it elemint elemint is.
Wêrom persintaazje hichteferskillen
As jo in webside ûntwerke, en jo hawwe in kolom dy't jo de folsleine hichte fan it finster opnimme wolle, is de natuerlike oanstriid om in hichte te meitsjen: 100%; oan dat elemint. As jo de breedte oant breedte sette: 100%; it elemint sil de folsleine horizontale romte fan 'e side opnimme, dus de hichte moat itselde, krekt dwaan? Spitigernôch is dit net it gefal.
Om te begripen wêrom't dit bart, moatte jo begrepen hoe't browsers hichte en breed ynfiere. Webbrowsers berekkenje de folsleine beskikbere breedte as funksje fan hoe breder it browserfenster iepene is. As jo gjin brede wearden op jo dokuminten sette, sil de blêder automatysk de ynhâld fletten om de folsleine breedte fan it finster te folle (100% breed is de standert).
Hichte wearde wurdt oars as berekkene berekkene. In feilichheid brûke browsers hielendal gjin heuze útsein, útsein as de ynhâld sa lang is dat it bûten it sichtpunt giet (sadat it skermbalken nedich is) of as de webûntwerper in absolute hichte set foar in elemint op 'e side. Oarspronklik liedt de browser de ynhâldstream yn 'e breedte fan' e werjefte oant it komt oan 'e ein. De hichte is net hielendal berekkene.
Problemen komme foardat jo in persintaazje hichte ynstelle op in elemint dat elemint eleminten hat sûnder heuvels opsette - yn oare wurden, hawwe de parentele eleminten in standerthichte: auto; . Jo binne, yn gefal, freegje de blêder om in hichte te rekkenjen fan in net-fereaske wearde. Sûnt dat liket in nul-wearde, dan is it resultaat dat de browser neat hat.
As jo in hichte op jo websiden op in persintaazje ynstelle wolle, dan moatte jo de hichte fan elke memmetaal elemint ynstelle dy't jo de hichte definiearje wolle. Mei oare wurden, as jo in side hawwe sa:
Ynhâld hjir
Jo wierskynlik wolle de div en de paragraaf yn hawwe om in 100% hichte te hawwen, mar dat Div hat eins twa memmetaal eleminten:
en. Om de hichte fan de div nei in relatyf hichte te bepalen, moatte jo de hichte fan it lichem en html-eleminten opnimme.
Sa moatte jo CSS brûke om de hichte te setten net allinich de div, mar ek de lichems en html-eleminten. Dit kin in útdaging wêze, om't jo fluch omgean kinne mei alles dat op 100% hichte stelt, allinich om dizze winske effekt te berikken.
Guon dingen om te notizen by wurkje mei 100% heuvels
No't jo witte hoe't jo de hichte fan jo side-eleminten op 100% ynstelle kinne, kin it spannend wêze om út te gean en dat te dwaan oan al jo siden, mar der binne in pear dingen dy't jo bewust binne moatte:
- Marginen en padding kinne in scrollbal taheakje taheakje dêr't jo net wolle. Ien fan 'e grutste dingen dy't ik fûn haw mei wurkje mei prestaasjes hichten (en breedten) is dat dan de padding en rânen op deselde eleminten scrollbalken tafoegje kinne oan' e side, alhoewol't de ynhâld allegear sûnder scrollbalken nedich is. Dit is om't de hichte of breedte fan it elemint it earste ding is dat berekkene is. Dan wurde de marten en paddings tafoege. As jo in elemint hawwe mei in hichte fan 100% en top en bottom marren fan elk 10 pixels, sil der in scrollbalke foar de ekstra 20 piksels wêze. Tink derom dat it CSS-fermogenmodel marzje, grins en padding op 'e grutte fan in elemint taheakket, sadat 100% mei ien fan' e oare kodermodellwearden in feit mear wêze as 100%.
- As jo ynhâld mear as de bepaalde hichte opnimt, sil it dêrnei oerskriuwe. Mei oare wurden, as jo in ûntwerp hawwe mei in kolom dy't 80% yn 'e hichte is, en de ynhâld dy't binnen is sil 100% fan' e hichte opnimme, dat ekstra 20% ûnderhâldt ûnder de kolom en brekt it fisuele ûntwerp fan jo side. As der ynhâld is ûnder dizze kolom, sil de tekst inkeld oer it top fan it skriuwe. Ik sjoch faak dat it barre as in webûntwerper besiket om de hichte fan in side te heljen en it perfekt te meitsjen foar start, mar as ynhâld op dizze side wizigingen yn 'e takomst brekt har absolute heuvels totaal de stream fan' e side. Dit is dûbele wier as jo opdraege websiden bouwe, wêrfan breedte en hichte wizigje moatte mei de grutte fan 'e werjefteport.
Om dit te beheinen kinne jo ek de hichte fan it elemint ynstelle. As jo it automatysk ynstelle, scrollbalken ferskine as se nedich binne, mar ferdwine as se net binne. Dit befettet de fisuele break, mar it tafoegje scrollbars wêr't jo se net wolle.
Using Viewport Units
In oare manier kinne jo dizze útdaging oanmeitsje om te eksperimintearjen mei CSS Viewport Units. Troch gebrûk fan de werjefte-hichte- ienheid fan 'e mjitting kinne jo eleminten groeie om in definieare hichte fan' e werjefte te nimmen, en dat sil wizigje as it werjaan feroaret! Dit is in geweldige manier om jo 100% hichtefoarbylden op in side te krijen, mar hawwe it noch fleksibel foar ferskate apparaten en skermgrutte.