¿Cómo hacer que un div horizontal ocupe todo el espacio restante disponible?

ntrrgc · #1 (**permalink**) 09/08/2010, 13:25

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é...

ArturoGallegos · #2 (**permalink**) 09/08/2010, 14:01

creo que esto es lo que necesitas
http://www.araudi.net/ejemplos/pie_siempre_abajo.html

si no es ese checa los aportes del compañero mikmoro seguramente alguno te ayudara con ideas

http://www.araudi.net

ntrrgc · #3 (**permalink**) 09/08/2010, 15:31

Finalmente, lo conseguí. En gran medida gracias a tus enlaces, Ag666.

Me sirvió, a parte del ejemplo que señalaste, este otro: http://www.araudi.net/ejemplos/simulacion_tabla.html

Aún así, hay que fastidiarse con cómo complica a veces CSS las cosas que podrían ser sencillas...

Pego debajo el código del primer post, funcionando correctamente, por si a alguien le sirve. Salut.

Código HTML:

<!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;
position: relative;
}
.cabecera {
height: 30px;
border: 1px solid red;
margin: 2px;
}
.contenido {
border: 1px solid green;
margin: 2px;
position: absolute;
top: 30px;
bottom: 30px;
left: 0px;
right: 0px;
}
.pie {
height: 30px;
border: 1px solid red;
margin: 2px;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
</style>
</head>
<body>

<div id="contenedor">
<div class="cabecera"><strong>Fila superior</strong></div>
<div class="contenido"><strong>Fila del medio</strong>, que debe ocupar todo el espacio
posible sin desplazar a las otras dos fuera del contenedor.</div>
<div class="pie"><strong>Fila inferior</strong></div>
</div>
</body>
</html>