Yon kesyon souvan mande nan konsepsyon sit entènèt la se "ki jan ou mete wotè nan yon eleman nan 100%"?
Sa a ka sanble tankou yon repons fasil. Ou tou senpleman itilize CSS yo mete wotè nan yon eleman nan 100%, men sa a pa toujou detire eleman sa a anfòm tout fenèt navigatè a. Ann chèche konnen poukisa sa rive ak sa ou ka fè pou reyalize estil vizyèl sa a.
Piksèl ak pousantaj
Lè ou defini wotè yon eleman lè l sèvi avèk pwopriyete CSS la ak yon valè ki itilize piksèl, eleman sa a pral pran anpil espas vètikal nan navigatè a.
Pa egzanp, yon paragraf ki gen yon wotè: 100px; pral pran 100 piksèl nan espas vètikal nan desen ou.Li pa gen pwoblèm ki jan pi gwo fenèt navigatè ou a, eleman sa a pral 100 piksèl nan wotè.
Pousantaj travay yon fason diferan pase piksèl. Dapre spesifikasyon W3C la, wotè pousantaj yo kalkile ki gen rapò ak wotè veso a. Se konsa, si ou mete yon paragraf ki gen yon wotè: 50%; andedan yon div ak yon wotè 100px, paragraf la pral 50 piksèl nan wotè, ki se 50% nan eleman paran li.
Poukisa Heat Pousantaj yo echwe
Si w ap desine yon Paj Web, epi ou gen yon kolòn ke ou ta renmen pran wotè a plen nan fenèt la, enklinasyon natirèl la se ajoute yon wotè: 100%; pou eleman sa a. Apre yo tout, si ou mete lajè a lajè: 100%; eleman an pral pran espas la plen orizontal nan paj la, se konsa wotè yo ta dwe travay menm bagay la tou, dwa? Malerezman, sa a se pa ka a nan tout.
Pou konprann poukisa sa rive, ou dwe konprann kijan navigatè yo entèprete wotè ak lajè. Navigatè entènèt kalkile lajè a disponib disponib kòm yon fonksyon de ki jan lajè fenèt navigatè a louvri. Si ou pa mete nenpòt valè de lajè sou dokiman ou, navigatè a pral otomatikman koule sa ki nan ranpli lajè a tout antye de fenèt la (100% lajè se default la).
Wotè valè a kalkile yon fason diferan pase lajè. An reyalite, navigatè yo pa evalye wotè a tout sof si kontni an se konsa lontan ke li ale deyò nan viewport a (konsa ki mande woulo liv) oswa si designer wèb la kouche yon wotè absoli pou yon eleman nan paj la. Sinon, navigatè a tou senpleman pèmèt koule nan kontni nan lajè a nan viewport a jiskaske li rive nan fen an. Wotè a pa aktyèlman kalkile nan tout.
Pwoblèm rive lè ou mete yon wotè pousantaj sou yon eleman ki gen eleman paran san wotè mete - nan lòt mo, eleman paran yo gen yon wotè default: oto; . Ou se, an efè, mande navigatè a kalkile yon wotè ki soti nan yon valè endefini. Depi ki ta egal yon valè null, rezilta a se ke navigatè a pa fè anyen.
Si ou vle mete yon wotè sou paj entènèt ou nan yon pousantaj, ou gen yo mete wotè nan chak eleman paran nan youn nan ou vle wotè a defini. Nan lòt mo, si ou gen yon paj tankou sa a:
Content isit la
Ou gen anpil chans vle div la ak paragraf la nan li gen yon wotè 100%, men div sa a aktyèlman gen de eleman paran:
ak. Yo nan lòd yo defini wotè div la nan yon wotè relatif, ou dwe mete wotè nan kò a ak html eleman kòm byen.
Se konsa, ou ta bezwen sèvi ak CSS yo mete wotè a pa sèlman div la, men tou, kò a ak eleman html. Sa a kapab yon defi, depi ou ka byen vit jwenn akable ak tout bagay yo te mete nan 100% wotè, sèlman reyalize efè sa a vle.
Gen kèk bagay yo dwe sonje lè w ap travay ak 100% Heights
Koulye a, ke ou konnen ki jan yo mete wotè nan eleman paj ou a 100%, li ka enteresan ale deyò epi fè sa nan tout paj ou, men gen kèk bagay ou ta dwe konnen:
- Mare ak padding ka ajoute yon woulo woulo kote ou pa vle yon sèl. Youn nan bagay ki pi anmèdan mwen te jwenn ak travay ak wotè pousantaj (ak lajè) se ke Lè sa a, padding a ak marges sou sa yo menm eleman ka ajoute woulo liv sou paj la, menm si tout kontni yo montre san yo pa bezwen woulo liv. Sa a se paske wotè a oswa lajè eleman an se premye bagay ki kalkile. Lè sa a, marges yo ak ankadreman yo te ajoute sou. Se konsa, si ou gen yon eleman ki gen yon wotè 100% ak tèt ak anba marges nan 10 piksèl chak, pral gen yon ba woulo liv pou siplemantè 20 piksèl yo. Sonje byen, modèl la bwat CSS ajoute marge, fwontyè, ak padding sou gwosè a nan yon eleman, se konsa 100% ak nenpòt nan sa yo lòt valè modèl bwat pral aktyèlman gen plis pase 100%.
- Si kontni ou pran plis pase wotè a defini, li pral recouvrir anyen apre li fin. Nan lòt mo, si ou gen yon konsepsyon ak yon kolòn ki se 80% nan wotè, ak kontni an ki andedan nan li pral pran 100% nan wotè a, ki siplemantè 20% ap kontinye anba a kolòn nan epi kase konsepsyon vizyèl la nan paj ou an. Si gen kontni ki anba a ki kolòn, tèks la pral tou senpleman ekri sou tèt la nan li. Mwen souvan wè sa a rive lè yon designer entènèt eseye fòse wotè nan yon paj ak vin li k ap travay parfe pou lansman, men lè kontni sou ki chanjman paj nan lavni an, Heights absoli yo totalman kraze koule nan paj la. Sa a se doubl verite lè w ap bati sit entènèt reponn ki gen lajè ak wotè dwe chanje ak gwosè a nan viewport la.
Pou ranje sa a, ou ka mete wotè eleman an tou. Si ou mete li nan oto, woulo liv ap parèt si yo bezwen men disparèt yo lè yo pa. Ki fikse repo a vizyèl, men li ajoute scrollbars kote ou ka pa vle yo.
Sèvi ak Inite Viewport
Yon lòt fason ou ka atake defi sa a se fè eksperyans ak inite CSS Viewport. Lè l sèvi avèk inite wotè nan viewport nan mezi, ou ka eleman gwosè yo pran yon wotè defini nan viewport a, epi ki pral chanje kòm chanjman yo Viewport! Sa a se yon bon fason yo ka resevwa vizyèl wotè 100% ou nan yon paj men yo toujou gen yo dwe fleksib pou aparèy diferan ak gwosè ekran.