Mistoqsija komuni fid-disinn tal-websajt hija "kif issettja l-għoli ta 'element għal 100%"?
Dan jista 'jidher bħala tweġiba faċli. Inti sempliċement tuża s- CSS biex issettja l-għoli ta 'element għal 100%, iżda dan mhux dejjem irawwem dak l-element biex jaqbel mat-tieqa tal-browser kollu. Ejja nsib għaliex jiġri dan u x'tista 'tagħmel biex jinkiseb dan l-istil viżwali.
Pixels u Perċentwali
Meta tiddefinixxi l-għoli ta 'element li juża l- proprjetà CSS u valur li juża l-pixels, dak l-element se jieħu dak l-ispazju vertikali ħafna fil-browser.
Per eżempju, paragrafu b'għoli: 100px; se tieħu 100 pixel ta 'spazju vertikali fid-disinn tiegħek. Ma jimpurtax kemm hu akbar it-tieqa tal-browser tiegħek, dan l-element se jkun ta' 100 pixels għoli.
Il-perċentwali jaħdmu b'mod differenti minn pixels. Skont l-ispeċifikazzjoni W3C, il-għoli tal-persentaġġ huwa kkalkulat fir-rigward tal-għoli tal-kontenitur. Mela jekk inti tpoġġi paragrafu b'għoli: 50%; ġewwa div b'għoli ta '100px, il-paragrafu se jkun 50 pixels għoli, li huwa 50% tal-element ġenitur tiegħu.
Għaliex il-Perċentwali Għoli jonqsu
Jekk qed tfassal webpage, u għandek kolonna li tixtieq tieħu l-għoli sħiħ tat-tieqa, l-inklinazzjoni naturali hija li żżid għoli: 100%; għal dak l-element. Wara kollox, jekk issettja l-wisa 'għal wisa': 100%; l-element se jieħu l-ispazju orizzontali sħiħ tal-paġna, għalhekk l-għoli għandu jaħdem l-istess, id-dritt? Sfortunatament, dan mhuwiex il-każ.
Biex tifhem għaliex jiġri dan, trid tifhem kif il-browsers jinterpretaw l-għoli u l-wisa '. Il-web browsers jikkalkulaw il-wisa 'totali disponibbli bħala funzjoni ta' kemm tiftaħ it-tieqa tal-browser. Jekk ma ssettjax valuri ta 'wisa' fuq id-dokumenti tiegħek, il-browser awtomatikament iwassal il-kontenut biex jimla l-wisa 'kollu tat-tieqa (wisa' ta '100% hija l-inadempjenza).
Il-valur tal-għoli huwa kkalkulat b'mod differenti mill-wisa '. Fil-fatt, il-browsers ma jevalwawx l-għoli fil-livelli kollha sakemm il-kontenut ma jkunx tant twil li jmur barra mill-viewport (u għalhekk jeħtieġu vireg tal-vireg) jew jekk id-disinjatur tal-web jistabbilixxi għoli assolut għal element fuq il-paġna. Inkella, il-browser sempliċement iħalli l-fluss tal-kontenut fil-wisa 'tal-viewport sakemm jasal sa l-aħħar. L-għoli mhux fil-fatt ikkalkulat fil-livelli kollha.
Problemi jseħħu meta tissettja għoli perċentwali fuq element li għandu elementi ġenituri mingħajr setturi għoljin - fi kliem ieħor, l-elementi prinċipali għandhom għoli default: auto; . Int, fil-fatt, titlob lill-browser biex jikkalkula għoli minn valur mhux definit. Peress li dan ikun ugwali għal valur nieqes, ir-riżultat huwa li l-browser ma jagħmel xejn.
Jekk trid tiffissa għoli fuq il-paġni tal-web tiegħek għal persentaġġ, għandek issettja l-għoli ta ' kull element ġenitur ta' dak li trid l-għoli definit. Fi kliem ieħor, jekk għandek paġna bħal din:
Kontenut hawnhekk
Inti x'aktarx trid li l-div u l-paragrafu fihom ikollhom għoli ta '100%, iżda li div attwalment għandha żewġ elementi ġenituri:
u. Sabiex tiddefinixxi l-għoli tad-div għal għoli relattiv, trid tistabbilixxi l-għoli tal-ġisem u l-elementi html ukoll.
Allura għandek bżonn tuża CSS biex tistabbilixxi l-għoli ta 'mhux biss id-div, iżda wkoll l-elementi tal-ġisem u html. Dan jista 'jkun sfida, peress li tista' malajr tingħaqad ma 'dak kollu li jkun stabbilit għal 100% għoli, biss biex jinkiseb dan l-effett mixtieq.
Uħud mill-Oġġetti li Għandhom Jindunaw Meta Ħadmu bi 100% Heights
Issa li taf kif issettja l-għoli tal-elementi tal-paġna tiegħek għal 100%, jista 'jkun eċċitanti li tmur u tagħmel dak għall-paġni kollha tiegħek, iżda hemm ftit affarijiet li għandek tkun konxju ta':
- Il-marġini u l-ikkuttunar jistgħu jżidu bar tal-iscroll fejn ma tridux. Waħda mill-affarijiet l-aktar tedjanti li sibt meta naħdem ma 'għoli ta' persentaġġ (u wisa ') hija li allura l-ikkuttunar u l-marġini fuq dawk l-istess elementi jistgħu jżidu vireg tal-vireg fuq il-paġna, anki jekk il-kontenut kollu juri mingħajr ma jkun hemm bżonn vireg tal-iscroll. Dan huwa minħabba li l-għoli jew wisa 'tal-element huwa l-ewwel ħaġa li tiġi kkalkulata. Imbagħad il-marġni u l-kuxxinetti huma miżjuda fuqhom. Mela jekk għandek element b'għoli ta '100% u marġini ta' fuq u ta 'isfel ta' 10 pixels kull wieħed, se jkun hemm bar ta 'l-iscroll għall-extra 20 pixels. Ftakar li l-mudell tal-kaxxa CSS iżid il-marġini, il-fruntiera u l-ikkuttunar fuq id-daqs ta 'element, għalhekk 100% b'xi wieħed minn dawk il-valuri tal-mudell tal-kaxxa l-oħra fil-fatt ikunu aktar minn 100%.
- Jekk il-kontenut tiegħek jieħu aktar mill-għoli definit, se jissostitwixxi xi ħaġa wara dan. Fi kliem ieħor, jekk għandek disinn b'kolonna 80% f'għoli, u l-kontenut li fih ġewwa se jieħu 100% tal-għoli, dak l-20% żejda se jkompli taħt il-kolonna u jikser id-disinn viżwali tal-paġna tiegħek. Jekk hemm kontenut taħt dik il-kolonna, it-test sempliċement jikteb fuq in-naħa ta 'fuq tiegħu. I spiss tara li dan iseħħ meta disinjatur tal-web jipprova jsaħħaħ l-għoli ta 'paġna u jikseb li jaħdem perfettament għat-tnedija, iżda meta l-kontenut fuq dik il-paġna jinbidel fil-futur, l-għoli assolut tagħhom jaqsam kompletament il-fluss tal-paġna. Dan huwa doppjament veru meta qed tinbena websajts li jirrispondu li l-wisa 'u l-għoli tagħhom għandhom jinbidlu bid-daqs tal-viewport.
Biex tiffissa dan, tista 'tiffissa l-għoli ta' l-element ukoll. Jekk issettjaha għall-awto, vireg tal-iscroll se jidhru jekk ikunu meħtieġa iżda jisparixxu meta ma jkunux. Li tiffissa l-waqfa viżwali, iżda żżid scrollbars fejn inti tista 'ma tridhomx.
Użu ta 'Unitajiet tal-Viżiv
Mod ieħor kif tista 'tindirizza din l-isfida huwa li tesperimenta bl-Unitajiet tal-Viżiv tas-CSS. Bl-użu tal-unità tal-kejl tal-għoli tal-viżjoni tista 'tuża elementi ta' daqs biex tieħu għoli definit tal-viżjoni, u dan jinbidel hekk kif il-viżjoni timxi! Dan huwa mod tajjeb ħafna biex tikseb il-viżwali ta '100% tal-għoli tiegħek fuq paġna imma xorta jkollokhom ikunu flessibbli għal apparati differenti u daqsijiet ta' skrin.