Webgunearen diseinuan galdera arruntak "nola ezarriko duzu% 100 elementuaren altuera"?
Honek erantzun erraza dirudi. CSS erabili besterik ez duzu% 100 elementuaren altuera ezartzeko, baina hori ez da beti luzatzen elementu hori arakatzailearen leiho osoa lortzeko. Ikus dezagun zergatik gertatzen den eta zer egin dezakezun ikusizko estilo hori lortzeko.
Pixelak eta portzentajeak
Elementu baten altuera definitzen duzunean CSS propietatearekin eta pixelak erabiltzen duen balioa definitzen duzunean, elementu horrek arakatzailearen leku bertikala hartuko du.
Adibidez, altuera duen paragrafo bat: 100px; zure diseinuan 100 espazio bertikaleko pixeleko pixelak hartuko ditu. Ez du axola zure arakatzailearen leiho handiena duenez, elementu honek 100 pixeleko altuera izango du.
Zentzuek pixelek baino pixka bat gehiago funtzionatzen dute. W3C zehaztapenaren arabera, ehuneko altuerak kalkulatzen dira edukiontziaren altuera kontuan hartuta. Beraz, paragrafo bat altuera batekin jarri baduzu:% 50; 100px-ko altuera duen div baten barruan, paragrafoa 50 pixeleko altuera izango da, hau da, gurasoaren% 50ekoa.
Zergatik ehuneko altuera huts egin du
Webgune bat diseinatzen ari bazara eta zutabe bat leihoaren altuera osoa hartu nahi baduzu, joera naturala altuera gehitzea da:% 100; elementu horri. Azken finean, zabalera zabalera zehazten baduzu:% 100; elementuak orrialde horizontala osoa hartuko du, beraz, altuera bera ere funtzionatuko luke, ezta? Zoritxarrez, hau ez da kasua.
Zergatik gertatzen den jakiteko, nabigatzaileek altuera eta zabalera interpretatzen dituztela ulertu behar duzu. Web arakatzaileek zabalera osoaren erabilgarritasuna kalkulatzen dute arakatzailearen leiho zabalaren zabaleraren arabera. Zure dokumentuen zabaleraren balioak ez badituzu, nabigatzaileak edukia automatikoki isurtzen du leihoaren zabalera osoa bete dezan (100% zabalera lehenetsia).
Altuera balioa ezberdina da zabalera baino. Izan ere, nabigatzaileek ez dute altuera ebaluatzen, edukia hain luzea ez bada ikusten leihoaren kanpoaldean (korritze tabernak behar izanez gero) edo web diseinatzaileak orriaren elementu bateko altuera absolutua ezartzen badu. Bestela, nabigatzaileak aukera ematen du edukien fluxua bisorearen zabaleraren barruan, amaiera arte. Altuera ez da guztiz kalkulatzen.
Zenbakiak gertatzen direnean altuerarik gabeko elementurik gabeko elementurik duen elementu baten altuera ehuneko altuera ezartzen baduzu, beste era batera esanda, gurasoek altuera lehenetsia dute: auto; . Ari zaren, hain zuzen ere, arakatzaileari undefined balio batetik altuera kalkulatzeko. Balio hutsa denez geroztik, emaitza ez da arakatzaileak ezer egiten.
Zure web orrietan ehunekotan altuera bat ezarri nahi baduzu, altuera definitu nahi duzun elementu bakoitzaren altuera ezarri behar duzu. Beste era batera esanda, hau bezalako orri bat baduzu:
Edukia hemen
Seguru asko, div eta paragrafoan% 100eko altuera izatea nahi duzu, baina div horrek bi guraso elementu ditu:
eta. Zatiaren altuera altuera erlatiboa zehazteko, gorputzaren eta html elementuen altuera ere ezarri behar dituzu.
Beraz, CSS erabili behar zenuke ez bakarrik div, ez bakarrik gorputza eta html elementu ezartzeko. Hau erronka bat izan daiteke, azkar eskuratu ahal izateko 100% altuera denak, nahi den efektua lortzeko.
Gauzak kontutan izan behar dituzu 100% altuekin lanean
Orain zure orriaren elementuen altuera% 100eraino nola ez badakizu, zirraragarria izan daiteke zure orrialde guztietatik ateratzea eta hori egitea, baina kontutan izan behar dituzu zenbait gauza:
- Marjinak eta beteginak nahi ez duzun korritze barra bat gehi ditzakezu. Altuera ehunekoak (eta zabalerak) lanean aurkitu dudan gauza gogaikarrienetako bat da hori, ondoren, elementu horietako betegarri eta marjinei esker, korritze tabernak orrialdera gehitzen dira, nahiz eta eduki guztiak bistaratzen korritze tabernarik gabe. Hau da elementuaren altuera edo zabalera kalkulatzen den lehenengo gauza. Ondoren, marjinak eta paddings gehituko dira. Beraz,% 100eko altuera duen elementua eta 10 pixeleko marjina goiko eta behekoa badaukazu, 20 pixeleko barrako barra-barra izango da. Gogoratu, CSS kutxa ereduak marjina, ertza eta estalkia gehitzen ditu elementu baten tamainara, beraz% 100eko beste kutxa eredu-balio batzuek% 100 baino gehiago izango lukete.
- Zure edukiak definitutako altuera baino gehiago hartzen badu, ezer gainidatziko du ondoren. Beste era batera esanda, diseinua zutabe bat da, altuera% 80koa bada eta haren barruan dagoen edukia altuera% 100 hartzen du,% 20 gehigarria zutabearen azpian jarraitzen duena eta diseinu bisuala apurtzea zure orrialdean. Zutabeko beheko edukia badaukazu, testua goiko aldean idatziko da. Webgune honetako diseinatzaileek orri baten altuera behartzen saiatzen direla ikusten dut askotan, eta primeran funtzionatzen du abiarazteko, baina orrialdean edukiak etorkizunean aldatzen direnean, bere altuera absolutuak orriaren fluxua erabat hondatzen dute. Hau bi aldiz egia da webgune sentikorrenak eraikitzen ari zarenean, zabalera eta altuera aldatu behar den leihoaren tamaina.
Hori konpontzeko, elementuaren altuera ere jar dezakezu. Automatikoki konfiguratzen baduzu, tabernak desplazatu egingo dira behar izanez gero, baina ez dira desagertuko. Ikusizko apustua konpontzen du, baina nahi ez dituzun korritze-barrak gehitzen ditu.
Viewport unitateak erabiliz
Erronka horri aurre egiteko beste modu bat CSS Viewport Unitateekin esperimentatzea da. Begiratu altuera neurtzeko unitatea erabiliz, leihoaren altuera definitutako altuera hartzen duten elementuak tamaina ditzakezu, eta leihoaren aldaketak aldatuko dira. Modu ezin hobea da zure orrien% 100eko altuera lortzeko, baina oraindik ere malguak izan daitezke gailu eta pantailako tamainuetarako.