Secció 4: Posicionament CSS

3. Dimensions d'una caixa

3.2. height

La propietat height especifica l'alçada de l'àrea de contingut de les caixes generades per elements de bloc.

Com deus suposar, el comportament de height és equivalent al de width:

• Només afecta als elements de bloc i als elements inline reemplaçats. En els elements inlne l'alçada de la caixa no depèn de height sinó de line-height.
• Accepta valors de longitud, percentatge (referits en aquest cas a l'alçada del bloc contenidor), o bé la paraula clau auto (valor per defecte), que veurem a l'apartat 6: 'Càlcul de marges i dimensions'. En el cas dels percentatges cal que el contenidor tingui un valor explícit per height (veure l'exemple 3 en aquesta mateixa pàgina)
• No pot tenir valors negatius.

És el moment de veure alguns exemples que permetin observar el comportament de width i height en diferents situacions.

Exemple 1: width i height

DIV   { border: 1px solid red; margin: 5px 0; }
DIV.1 { width: 300px; }
DIV.2 { width: 300px; height: 100px; }

Si creem un DIV sense classe, un amb classe "1" i un altre amb classe "2", obtenim el següent:

En el DIV de classe 1 l'amplada de l'àrea de contingut es fixa a 300px. L'alçada del DIV es fa tan gran com calgui per que hi càpigui tot el contingut. En el DIV de classe 2 es fixa a més l'alçada i per tant, encara que el contingut necessita menys de 100px, el DIV pren aquest valor com a alçada de l'àrea de contingut.

Què passa quan el contingut d'un element necessita més espai que el que s'especifica al valor de height? En aquest cas s'ignora el valor especificat i es fa l'element més alt, tant com calgui per encabir-hi el contingut. Ho podem comprovar creant un DIV de classe 2 amb més contingut:

Nota: Com veurem més endavant, aquest comportament es pot modificar amb la propietat overflow. Per cert, amb Mozilla (també dona sorpreses, de vegades!) el DIV s'allarga verticalment com esperàvem, però la vora vermella es limita a 100px d'alçada.

Exemple 2: width i percentatges

DIV   { border: 1px solid blue; margin: 5px 0; }
DIV.1 { width: 50%; }
DIV.2 { margin-left: 50%; }
DIV.3 { width: 50%; margin-left: 25%; }

Amb aquest exemple pots intuir que la combinació de width i marges horitzontals (i també paddings horitzontals) serà una eina poderosa per a establir la disposició dels elements d'una pàgina. Quan estudiem el posicionament en sí en veurem exemples. També pots veure que a l'hora d'implementar posicionament CSS en navegadors concrets ens trobarem amb problemes de precisió. Per exemple, el segon i tercer DIV en IE haurien de tenir una amplada igual al primer, i no és així.

Exemple 3: height i percentatges

En el cas d'usar percentatges per height hi ha una particularitat que cal tenir present. El bloc contenidor ha de tenir un valor de height explícit, si no el valor de height s'ignora. Ho pots observar en el següent exemple:

Fixa't que si el bloc contenidor té height expressada en percentatge, ens trobarem amb el mateix problema: serà ignorada, i per tant també la que s'especifiqui en l'element. Per utilitzar percentatges dins de percentatges, cal que ens assegurem que existeix un bloc contenidor extern amb un valor explícit per height.