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
Comentat per faemino el 28/10/04
Aixó no es fa are. Deixes entendre que es la gran "esperanza blanca" i després ens treus el carmel de la boca, amb una decepció. ;-)
Comentat per are el 28/10/04
és exactament el que vaig sentir jo! :D