Caixes d'alçada total
Publicat el 27/10/2004
Tornem a un tema problemàtic del món tableless.
Un mètode fàcil d'implementar i que no necessita de codi extra és el comentat per Andy Peatling a 100% Height Issues.
Per aconseguir que una caixa ocupi el 100% de l'alçada del navegador només cal que el seu pare també ocupi el 100%. Per tant el que s'hauria de fer és:
html, body {
height: 100%;
}
Per, després definir una caixa d'alçada 100%
div {
height: 100%;
}
La primera pregunta que m'ha vingut al cap al veure això ha estat I amb això i
float no es podrien fer columnes de forma simple?
La resposta és no. Que una caixa ocupi el 100% d'alçada només és una part del problema. Què passa quan el contingut supera el 100% de l'alçada del navegador?
En IE la caixa s'expandeix per culpa de l'error d'interpretació que en fà. Als navegadors moderns la caixa no s'expandeix amb el contingut ja que li hem deixat clar que només voliem el 100% de l'alçada del navegador.
La solució passaria per utilitzar la propietat min-height però aquí apareixen els problemes: el Firefox no respón a la propietat min-height quan el valor és percentual. En Opera, cap problema.
Font: torresburiel.com
Comentaris