Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de ¿Cómo hacer que un div horizontal ocupe todo el espacio restante disponible? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/08/2010, 14:25
 
Fecha de Ingreso: diciembre-2007
Mensajes: 7
Antigüedad: 10 años
Puntos: 0
Pregunta ¿Cómo hacer que un div horizontal ocupe todo el espacio restante disponible?

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é...
  #2 (permalink)  
Antiguo 09/08/2010, 15:01
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: ¿Cómo hacer que un div horizontal ocupe todo el espacio restante disponibl

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
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 09/08/2010, 16:31
 
Fecha de Ingreso: diciembre-2007
Mensajes: 7
Antigüedad: 10 años
Puntos: 0
Respuesta: ¿Cómo hacer que un div horizontal ocupe todo el espacio restante disponibl

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> 

Última edición por ntrrgc; 09/08/2010 a las 16:32 Razón: Eh... vale. Que le zurren.

Etiquetas: disponible, espacio, ocupar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:21.