Una pregunta freqüent en el disseny del lloc web és "com configurar l'alçada d'un element al 100%"?
Això pot semblar una resposta senzilla. Simplement utilitzeu CSS per establir l'alçada d'un element al 100%, però això no sempre estira aquest element per adaptar-se a la finestra del navegador sencer. Descobriu per què passa això i què podeu fer per aconseguir aquest estil visual.
Píxels i percentatges
Quan definiu l'alçada d'un element mitjançant la propietat CSS i un valor que utilitza píxels, aquest element ocuparà aquest espai molt vertical al navegador.
Per exemple, un paràgraf amb una alçada: 100px; tindrà 100 píxels d'espai vertical en el disseny. No importa quant més gran sigui la finestra del navegador, aquest element serà de 100 píxels d'alçada.
Els percentatges funcionen de manera diferent que els píxels. Segons l'especificació W3C, les alçades percentuals es calculen respecte a l'alçada del contenidor. Així que si col·loqueu un paràgraf amb una alçada: 50%; dins d'un div amb una alçada de 100 px, el paràgraf serà de 50 píxels d'alçada, que és el 50% del seu element primari.
Per què les altures percentuals fallen
Si esteu dissenyant una pàgina web i teniu una columna que vulgueu ocupar l'alçada completa de la finestra, la inclinació natural és afegir una alçada: 100%; a aquest element. Després de tot, si estableix l'amplada a l'amplada: 100%; l'element ocuparà l'espai horitzontal complet de la pàgina, de manera que l'alçada hauria de funcionar igual, oi? Malauradament, aquest no és el cas.
Per entendre per què passa això, heu d'entendre com els navegadors interpreten l'alçada i l'amplada. Els navegadors web calculen l'amplada total disponible en funció de l'ample que obre la finestra del navegador. Si no estableix cap valor d'ample en els vostres documents, el navegador fluirà automàticament els continguts per omplir tot l'ample de la finestra (l'ample del 100% és el valor predeterminat).
El valor d'alçada es calcula de manera diferent a l'amplada. De fet, els navegadors no avaluen l'altura en absolut, tret que el contingut sigui tan llarg que surt fora de la finestra (requereix barres de desplaçament) o si el dissenyador web estableix una alçada absoluta per a un element de la pàgina. En cas contrari, el navegador simplement permet que el contingut flueixi dins de l'amplada de la finestra fins que arribi al final. L'alçada no es calcula en absolut.
Els problemes es produeixen quan s'estableix una alçada de percentatge en un element que té elements primaris sense establir altures, és a dir, els elements primaris tenen una alçada predeterminada: auto; . En efecte, esteu demanant al navegador que calculi una alçada des d'un valor no definit. Atès que això equival a un valor nul, el resultat és que el navegador no fa res.
Si voleu establir una alçada en les seves pàgines web a un percentatge, haureu d'establir l'alçada de cada element primari del que vulgueu definir l'alçada. En altres paraules, si teniu una pàgina com aquesta:
Contingut aquí
És probable que vulgueu que el div i el paràgraf hi tinguin una alçada del 100%, però que en realitat té dos elements primaris:
i. Per definir l'alçada del div a una alçada relativa, també heu d'establir l'alçada del cos i els elements html.
Per tant, hauríeu d'utilitzar CSS per establir l'alçada de no només el div, sinó també els elements del cos i html. Això pot suposar un repte, ja que es pot aclaparar ràpidament, tot estant fixat al 100% d'alçada, només per aconseguir aquest efecte desitjat.
Algunes coses a tenir en compte quan es treballa amb altures del 100%
Ara que sap com establir l'alçada dels elements de la pàgina al 100%, pot resultar emocionant sortir i fer-ho a totes les seves pàgines, però hi ha algunes coses que ha de tenir en compte:
- Els marges i el farciment poden afegir una barra de desplaçament on no voleu una. Una de les coses més molestes que he trobat amb treballar amb altures percentuals (i amplades) és que, després, els marges i els marges d'aquests mateixos elements poden afegir barres de desplaçament a la pàgina, tot i que tot el contingut es visualitza sense necessitat de barres de desplaçament. Això es deu a que l'alçada o l'amplada de l'element és el primer que es calcula. A continuació, s'afegeixen els marges i els remats. Així, si teniu un element amb una alçada del 100% i els marges superior i inferior de 10 píxels cadascun, hi haurà una barra de desplaçament per als 20 píxels addicionals. Recordeu que el model de caixa CSS afegeix marge, vora i farcit a la mida d'un element, de manera que el 100% amb qualsevol d'aquests altres valors de model de caixa serà en realitat més del 100%.
- Si el vostre contingut ocupa més de l'alçada definida, se sobreescriurà tot després. En altres paraules, si teniu un disseny amb una columna del 80% d'alçada i el contingut que hi ha dins tindrà el 100% de l'alçada, aquest 20% addicional continuarà per sota de la columna i trencarà el disseny visual de la vostra pàgina. Si hi ha contingut sota aquesta columna, el text simplement s'escriurà sobre la part superior de la mateixa. Sovint veig que això passa quan un dissenyador web intenta forçar l'alçada d'una pàgina i ho fa funcionar perfectament per al seu llançament, però quan el contingut d'aquesta pàgina canvia en el futur, les seves altures absolutes trenquen totalment el flux de la pàgina. Això és doblement cert quan es construeixen llocs web responsables, l'amplada i alçada dels quals ha de canviar amb la mida de la finestra.
Per solucionar-ho, també podeu establir l'alçada de l'element. Si la configureu automàticament, les barres de desplaçament es mostraran si són necessàries, però desapareixen quan no ho són. Això soluciona la ruptura visual, però afegeix barres de desplaçament en les que no us voleu voler.
Ús de les unitats de visualització
Una altra manera d'enfrontar-se a aquest repte és experimentar amb Unitats de visualització CSS. Mitjançant l'ús de la unitat d' alçada del tauler de mesura, podeu dimensionar els elements per ocupar una alçada definida de la finestra, i això canviarà a mesura que canvia la finestra. Aquesta és una bona manera d'obtenir les visualitzacions d'al 100% d'alçada en una pàgina, però encara les haureu de flexibilitzar per a diferents dispositius i mides de pantalla.