Skip to content

Composición con CSS. Altura mínima

Published: at 12:00 AM

Vamos a ver un caso de práctico de como utilizar las hojas de estilo para realizar la estructura de las páginas, dejando las sufridas tablas, que no están hechas para eso.

Para este ejemplo haré una estructura simple: cabecera, contenidos y pie. La única cosa especial que tendrá será que la caja de los contenidos tendrá una altura mínima… y aquí tenemos algo de pelea entre los diferentes navegadores.

Vayamos al tema. Primero como quedaría la página:

Aqui va el titulo, logo, etc
Bla bla bla, bla bla bla bla
Y esto sería un pie de página

Estructura bien simple y autoexplicativa. Pasamos entonces a la hoja de estilos que es donde está lo interesante:

#cabecera {
	background: #666;
	width: 770px;
	height: 90px;
	padding: 5px;
}

Definimos un color de fondo, altura y anchura y un poco de padding para que no se nos pegue el texto. Seguimos primero con el pie:

#pie {
	background: #666;
	width: 770px;
	height: 40px;
	padding: 5px;
}

Ahora vamos a por contenidos, que como dije antes va a tener una altura mínima. Así si ponemos una única línea de texto, no quedará todo reducido, y sin embargo a medida que vamos escribiendo irá creciendo.

#contenidos {
	width: 770px;
	background: #ccc;
	min-height: 300px;
	padding: 5px;
}

Pero ¡ay! Problema. Esto funciona perfectamente en un navegador moderno, tipo Firefox, Mozilla, Opera, etc. Pero si cargamos la página en el Internet Explorer 6 no nos hará ni caso. Ver ejemplo.

Podemos probar algo diferente, tipo:

#contenidos {
	width: 770px;
	background: #ccc;
	height: 300px;
	padding: 5px;
}

Pero ahora tenemos el caso al revés. En el Internet Explorer 6 funciona bien, pero los demás mostrarán la caja con un tamaño fijo, y no crecerá a medida que escribimos más texto. Ver ejemplo.

Podríamos hacer una hoja diferente para cada navegador y discriminar con javascript, pero podemos arreglarlo con una sola, asi:

#contenidos {
	position:relative;
	width: 770px;
	background: #ccc;
	height: 300px;
	padding: 5px;
}
html>body #contenidos {
	min-height: 300px;
	height: auto;
}

Ver ejemplo, para comprobar que todo funciona ya correctamente, tanto con Firefox, Mozilla, Opera e Internet Explorer 6. En IE5/Mac creo que también funciona correctamente, IE5/Win no lo he podido probar, ni Safari ni otros navegadores del Mac. Tampoco en linux, o sea que si alguien ve que no funciona bien, que me lo diga.

Si sólo ponemos una línea también va correctamente (ver ejemplo), que al fin y al cabo es de lo que se trataba la cosa.

Espero que le sea útil a alguien. ;) Otro día más.