Ahoana ny fampiasana CSS mba hametrahana ny haben'ny HTML amin'ny 100%

Ny fametrahana fanontaniana matetika amin'ny tranokala vohikala dia ny hoe "ahoana ny fametrahanao singa iray amin'ny 100%"?

Mety ho toy ny valiny mora izany. Mampiasa CSS fotsiny ianao mba hametrahana ny haavon'ny singa iray ho 100%, saingy tsy manindry io singa io foana mandra-pahatongan'ny varavarankety manontolo. Andeha hojerentsika hoe maninona no mitranga izany ary inona no azonao atao mba hahatratrarana io fomba fijery io.

Pikantsary sy tarehimarika

Rehefa mamaritra ny haavon'ny singa iray mampiasa ny CSS ary ny sandany mampiasa piksela, dia haka an'io sehatra midadasika io amin'ny sehatry ny browser.

Ohatra, paragrafy iray avo lenta: 100px; dia haka sary 100 pixels amin'ny sehatra midadasika ao amin'ny design ou.Izany dia tsy mampaninona ny fisidinan'ny varavarankelinao, io singa io dia 100 pixel avo.

Ny isan-jato dia miasa tsy mitovy amin'ny pixels. Araka ny filazan'ny W3C, ny halehiben'ny isan-jato dia mifandraika amin'ny haavon'ilay container. Koa raha mametraka fehintsoratra amin'ny haavo ianao: 50%; Ao anatin'ny div tamin'ny 100px avo dia ho 50 pixel avo ny fehintsoratra, izany hoe 50% ny singa fototra ao amin'ny ray aman-dreniny.

Nahoana no tsy nahomby ny isam-paritany

Raha manamboatra pejy Internet ianao, ary manana tsanganana izay tianao haka ny haavo manontolo amin'ny varavarankely, ny fironana voajanahary dia manampy ny haavony: 100%; ho an'ity singa ity. Raha ny marina, raha mametraka ny sakan'ny sakany ianao: 100%; Ny singa dia haka ny sehatra feno horizonta amin'ny pejy, noho izany ny haavo dia tokony hiasa toy izany, sa tsy izany? Indrisy anefa fa tsy izany no izy.

Mba hahalalanao ny antony mahatonga izany, tsy maintsy takatrao hoe ahoana no fomba handikan'ny mpamaky ny haavony sy ny sakany. Ireo navigateur amin'ny Internet dia mamerina ny habaka malalaka rehetra amin'ny anjara asan'ny varavarankelin'ny tranokala. Raha tsy mametraka sanda marim-pototra amin'ny taratasinao ianao, dia hampidina ny votoaty mba hameno ny sakan'ny varavarankely manontolo (amin'ny 100% ny haavony).

Ny sandan'ny heverina dia tsy mitovy amin'ny isa. Raha ny marina, ny mpiblaogy dia tsy manombantombana ny haavony raha tsy efa ela loatra ny votoaty dia mivoaka ivelan'ny fomba fijery (mitaky bara horonana) na raha mametraka ny haavony ho an'ny singa iray ao amin'ny pejy ny mpamorona tranonkala. Raha tsy izany, ny mpamadika dia mamela fotsiny ny fizotry ny votoaty ao anatin'ny habaka ny fomba fijery mandra-pahatongan'ny farany. Ny haavony dia tsy voavaly mihitsy.

Ny olana dia mitranga rehefa mametraka ny haavon'ny isam-bidy amin'ny singa iray izay misy singa fototra tsy misy elabe ny ray aman-dreninao - amin'ny teny hafa, ny singa fototra amin'ny ray aman-dreny dia manana haavo miavaka: auto; . Ianao, raha ny marina, dia mangataka ny mpizahatany mba hanatsara ny haavon'ny tsy manan-danja. Koa satria mitovy tsy misy valiny ny vokatra, ny vokatra dia tsy manao na inona na inona ilay navigateur.

Raha te hametraka ny haavon'ny pejy ao amin'ny tranonkalanao ianao, dia tsy maintsy mametraka ny haavon'ny elanelan'ny ray aman-dreninao ao amin'ilay tadiavinao ianao. Amin'ny teny hafa, raha manana pejy tahaka izao ianao:





Content here



Azo inoana fa ny div sy ny andininy ao aminy dia manana haavo 100%, fa ny divy dia manana singa roa :

ary. Mba hamaritana ny haavon'ny div amin'ny havoana avo iray, tsy maintsy mametraka ny haavon'ny vatana sy ny singa html ianao.

Noho izany dia mila mampiasa CSS ianao mba hametra ny haavon'ny tsy divay, fa koa ny singa vatana sy html. Mety ho fanamby izany, satria afaka mahatsapa haingana amin'ny zavatra rehetra atrehina ho 100% ianao, raha te hahatratra an'io vokatra tadiavinao io.

Zavatra sasany tokony hotadidinao rehefa miasa miaraka amin'ny 100% Heights

Ankehitriny rehefa fantatrao ny fomba hametrahana ny haavon'ny pejy ao amin'ny pejy ho 100%, dia mety ho mahafinaritra ny mivoaka sy manao izany amin'ny pejy rehetra, saingy misy zavatra vitsivitsy tokony ho fantatrao:

Mba hanamafisana izany, dia azonao atao ny mametraka ny haavon'ny elanelana. Raha mametraka azy ho an'ny fiara ianao, dia hivoaka ny baoritra raha toa ka ilaina izy ireo nefa tsy hita intsony rehefa tsy izy ireo. Izany dia mamaha ny fiatrehana ny sary, fa manampy trotraka izay mety tsy tianao.

Fampiasana singa Viewport

Ny fomba iray hafa ahafahanao miatrika izany fanamby izany dia ny fanandramana amin'ny CSS Viewport Units. Amin'ny fampiasana fitaovana famelabelarana avo lenta, azonao atao ny manalehibe ny elanelam-potoana hizaha ny haavon'ny fehezanteny, ary hiova izany rehefa miova ny fomba fisainana! Izany dia fomba lehibe ahafahana mampiseho ny sary sokajy 100% eo amin'ny pejy iray nefa mbola manana azy ireo ho mavitrika amin'ny fitaovana samihafa sy ny habaka.