Llevo un buen rato pegándome con CSS para conseguir esto y no soy capáz, por lo que lo pregunto aquí. Mejor eso que recurrir a las tablas.
El problema es bastante sencillo. Tengo un div padre (contenedor), de dimensiones desconocidas, y dentro de él quiero colocar tres div hijos (filas). Uno arriba, de tamaño fijo; uno abajo, también de tamaño fijo; y otro en el medio, que debe ocupar todo el espacio restante.
El código es el siguiente:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<meta name="author" content="Unknown" />
<title>Prueba CSS</title>
<style type="text/css">
#contenedor {
width: 400px; /* el tamaño en este caso es conocido, pero */
height: 200px; /* en el caso real el tamaño es desconocido. */
border: 1px solid blue;
}
.fila_normal {
height: 30px;
border: 1px solid red;
margin: 2px;
}
.fila_alta {
border: 1px solid green;
margin: 2px;
/* height: 100%; <-- No funciona, porque desplaza a los otros div,
al cojer no sólo el espacio disponible,
si no el 100% de la altura del padre */
}
</style>
</head>
<body>
<div id="contenedor">
<div class="fila_normal">Fila superior</div>
<div class="fila_alta">Fila del medio</div>
<div class="fila_normal">Fila inferior</div>
</div>
</body>
</html>
¿Cómo puedo conseguir que la fila del medio ocupe todo el espacio disponible? Cuando se trata de varios div verticales, es fácil con un 'margin: 0px auto;', pero cuando son horizontales ya no sé...