Komune demandita demando pri retpaĝaro estas "kiel vi agordas la altecon de ero al 100%"?
Ĉi tio eble ŝajnas facila respondo. Vi simple uzas CSS por agordi la altecon de elemento al 100%, sed ĉi tio ne ĉiam etendas tiun elementon por persvadi la tutan retumilon. Ni eksciu, kial tio okazas kaj kion vi povas fari por atingi ĉi tiun vidan stilon.
Pikseloj kaj Procentoj
Kiam vi difinas la altecon de elemento per la CSS-posedaĵo kaj valoro, kiu uzas pikselojn, tiu elemento prenos tiom multe da vertikala spaco en la retumilo.
Ekzemple, alineo kun alteco: 100px; prenos supre 100 pikselojn de vertikala spaco en via dezajno. Ne gravas, kiom pli granda estas via retumilo, ĉi tiu elemento estos 100 pikseloj alte.
Procentoj laboras malsame ol pikseloj. Laŭ la specifaĵo de W3C, procentoj de altecoj estas kalkulitaj koncerne al la alteco de la ujo. Do se vi almetas alineon kun alteco: 50%; ene de div kun alteco de 100px, la alineo estos 50 pikseloj alte, kio estas 50% de ĝia gepatra elemento.
Kial Proksimaj Altoj Malsukcesas
Se vi desegnas retpaĝon, kaj vi havas kolumnon, kiun vi deziras preni la plenan altecon de la fenestro, la natura deklivo aldonas altecon: 100%; al tiu elemento. Post ĉio, se vi agordas la larĝecon al larĝa: 100%; la elemento prenos la plenan horizontan spacon de la paĝo, do alteco devus funkcii la saman, ĉu ne? Bedaŭrinde, ĉi tio tute ne estas.
Por kompreni, kial tio okazas, vi devas kompreni, kiel retumiloj interpretas altecon kaj larĝecon. Retumaj retumiloj kalkulas la tutan disponeblan larĝecon kiel funkcio de kiom larĝa malfermilo estas malfermita. Se vi ne agordas ajnajn larĝajn valorojn en viaj dokumentoj, la retumilo aŭtomate fluos la enhavon por plenigi la tutan larĝon de la fenestro (100% larĝa estas la defaŭlta).
Alteca valoro kalkulas malsame ol larĝa. Fakte, la retumiloj ne taksas alton ĉie, se la enhavo estas tiel longa, ke ĝi ekster la vidujo (tiel necesiganta rulumajn stangojn) aŭ se la retejo-desegnisto agordas absolutan altecon por elemento en la paĝo. Alie, la retumilo simple lasas la enhavon flui ene de la larĝo de la vidujo ĝis ĝi finiĝas. La alteco ne estas fakte kalkulita.
Problemoj okazas kiam vi starigas procenton altecon sur elemento, kiu havas ĉefajn elementojn sen altecoj, en aliaj vortoj, la ĉefaj elementoj havas defaŭltan altecon: aŭtomate; . Vi fakte petas, ke la retumilo kalkulas altecon de nedifinita valoro. Ĉar tio egalas nula valoro, la rezulto estas, ke la retumilo faras nenion.
Se vi volas agordi alton sur viaj retpaĝoj al procento, vi devas agordi la altecon de ĉiu gepatra elemento de tiu, kiun vi volas, ke la alteco difinis. Alivorte, se vi havas paĝon kiel ĉi tiu:
Enhavo ĉi tie
Vi verŝajne volas ke la div kaj la alineo en ĝi havi 100% altecon, sed tiu fakte havas du gepatrojn:
kaj. Por difini la altecon de la div al relativa alteco, vi devas ankaŭ agordi la altecon de la korpo kaj html-elementoj.
Do vi bezonus uzi CSS por agordi la altecon de ne nur la div, sed ankaŭ la korpon kaj html-elementojn. Ĉi tio povas esti defio, ĉar vi rapide povas superforti ĉion, kio estas al 100% alte, nur por atingi ĉi tiun deziritan efikon.
Kelkaj Aĵoj Noti Kiam Laboras kun 100% Altaj
Nun, ke vi scias kiel agordi la altecon de via paĝo elementoj al 100%, ĝi povas esti ekscita eliri kaj fari tion al ĉiuj viaj paĝoj, sed estas kelkaj aferoj, kiujn vi devas konscii pri:
- Margins kaj reloj povas aldoni ruluman stangon, kie vi ne volas. Unu el la plej ĝenaj aferoj, kiujn mi trovis kun laborado kun procentoj de altecoj (kaj larĝecoj), estas ke tiam la kompletigo kaj randoj sur tiuj samaj elementoj povas aldoni rulumajn stangojn al la paĝo, kvankam ĉiuj enhavo montras sen neceso de rulumaj baroj. Ĉi tio estas ĉar la alteco aŭ larĝa de la elemento estas la unua afero, kalkulita. Tiam oni aldonas la randojn kaj paŝojn. Do se vi havas elementon kun alteco de 100% kaj supraj kaj malsupraj randoj de 10 rastrumeroj ĉiu, ekzistos rulumskalo por la ekstra 20 pikseloj. Memoru, la CSS-skatolo-modelo aldonas randon, limon kaj kompletigon al la grandeco de elemento, do 100% kun iu el tiuj aliaj skatoloj-modelvaloroj fakte estos pli ol 100%.
- Se via enhavo prenas pli ol la difinitan altecon, ĝi anstataŭigos ion post ĝi. Alivorte, se vi havas dezajnon kun kolumno, kiu estas 80% alte, kaj la enhavo, kiu estas ene de ĝi, prenos supre 100% de la alteco, tiu ekstra 20% daŭrigos sub la kolumno kaj rompos la vidan dezajnon de via paĝo. Se estas enhavo sub tiu kolumno, la teksto simple skribos super la supro de ĝi. Mi ofte vidas, ke ĉi tio okazas, kiam retpaĝisto provas devigi la alton de paĝo kaj atingas ĝin funkcii perfekte por lanĉo, sed kiam enhavo de tiu paĝo ŝanĝiĝas en la estonteco, iliaj absolutaj altecoj plene rompas la fluon de la paĝo. Ĉi tio estas duoble vera kiam vi konstruas respondemajn retejojn, kies larĝa kaj alteco devas ŝanĝi laŭ la grandeco de la vidujo.
Por ripari tion, vi povas ankaŭ agordi la altecon de la elemento. Se vi metas ĝin al aŭtomata, rulumaj rigliloj aperos, se ili bezonos, sed malaperos kiam ili ne estas. Tio ripari la vidpunkton, sed aldonas scrollbars, kie vi eble ne volas.
Uzante Viewport Units
Alia maniero, kiun vi povas trakti ĉi tiun defion, estas sperti kun CSS Viewport Units. Uzante la mezuritan unuecon de vidpunkto , vi povas grandecaj elementoj preni supre difinitan altecon de la vidujo, kaj tio ŝanĝos laŭ la ŝanĝo de la vidujo! Ĉi tio estas bonega maniero por ricevi vian 100% altecon de bildoj en paĝo sed ankoraŭ havas ilin esti flekseblaj por malsamaj aparatoj kaj ekranecaj grandecoj.