Ajustar div al 100% del espacio del que disponga

super_rayo · #1 (**permalink**) 15/03/2012, 09:25

Hola, ¿qué hay?

¿Cómo puedo ajustar un div que está dentro de otro (junto con otros divs más) al 100% en altura del espacio del que disponga?

Espero haberme explicado, gracias.

luna690 · #2 (**permalink**) 15/03/2012, 09:48

Prueba en el div "hijo": height:auto;

Mira ésta página: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Saludos.

cristian_cena · #3 (**permalink**) 15/03/2012, 12:42

Por defecto una caja contenedora crecerá en altura junto con su contenido anidado, es decir, su altura será equivalente a la de su hijo más alto. Si "quitamos de flujo (*)" uno o mas hijos flotandolos sin avisarle al contenedor que lo hemos hecho, la caja contenedora no sabrá que alto tomar y su alto en consecuencia será 0 (cero).

Por lo tanto, naturalmente no hace falta declarar height:auto; mientras que si flotas contenido será una buena práctica que todos los hermanos estén flotados y anidados dentro de un mismo contenedor. Al mismo tiempo debes "limpiar el flotado" (*) indicando overflow:hidden al contenedor, con lo cual este interpretará la altura de su hijo más alto y la tomará como propia creciendo en alto en función de sus hijos.

Esto por una parte, para lidiar con floats.

Por otra parte podes trabajar con otro tipo de posicionamiento.
Por ejemplo puede que tu caja contenedora se posicione "relative" y uno de sus hijos "absolute".
Aquí lo tenes simple. Asignas un ancho y un alto a la caja contenedora relativa. y luego el mismo alto y ancho a la caja hija absoluta. Una caja absoluta buscará posicionarse de su ancestro inmediato "relative" y de no hallarlo lo hará respecto de <body>

PD:
(*) http://www.librosweb.es/css/capitulo..._flotante.html
pregunta sin código => respuesta sin código.

LagoGZ · #4 (**permalink**) 15/03/2012, 17:03

Y esto?

<div style="height:100px; width:100px;">
<div style="position:absolute; height:100%; width:100%;">

</div>
</div>

La div hija se ajusta al 100% de su contenedor, pero para q quieres esto?

Un saludo.

furoya · #5 (**permalink**) 15/03/2012, 21:47

Cita:

Iniciado por super_rayo

Hola, ¿qué hay?

¿Cómo puedo ajustar un div que está dentro de otro (junto con otros divs más) al 100% en altura del espacio del que disponga?

Espero haberme explicado, gracias.

Yyy... No mucho. Pero ya estamos acostumbrados a adivinar. O aprovechar la ambigüedad para explicar un poco de HTML, CSS, JS, lo que aparezca.

Está muy bien tu explicación, cristian_cena. Pero me quedé pensando en que apunta a los bloques flotados. La misma idea tuvo luna690, que eran columnas. Y es muy probable que super_rayo hablara de eso, pero lo de "junto a otros divs" también puede ser un "todos hermanos dentro de una caja". Que no están "al lado del otro" con float.

Mira, hace un par de días aproveché un tema -donde también preguntaron como el traste- para explicar un drama similar ... y ahora no sé si no es el mismo. Honestamente, mucho no me importa si la respuesta le sirve al que pregunta, porque lo hizo mal. Pero insisto en que me parece muy bien aprovechar temas que de otra forma quedarían sólo ocupando espacio en el server, y meterles tutoriales.

En ese caso ya le iba a dejar ejemplos y seguir un poco con soluciones ... porque tampoco soy tan mal bicho. Si después explicaba mejor, es porque aprendió algo y se merece la ayuda. Pero resultó otro desubicado que no sabe leer ni lo que escribe ni lo que le escriben, ni escribir tampoco.

Pero por suerte apareciste tú, super_rayo! Que me estás dando la oportunidad de recordar que las medidas relativas siguen a las de sus contenedores. Excepto en algún navegador; pero lo vemos luego.

Claro que llegué tarde y entre cristian_cena, luna690 y LagoGZ ya explicaron en qué casos la altura "no aparece" y que en algún ancestro hay que meter una medida absoluta; aunque sea al body con el ciento por ciento del <HTML>, que por ser el último sí tiene "medidas por omisión". Pero al body hay que declararle el porcentaje lo mismo que a sus hijos.

De otra forma, si no hay contenido, no hay "altura". Y así no podemos diseñar. No sólo "los fondos" no llegan hasta abajo, sino que los hijos del contenedor no ocupan la altura disponible del navegador, o del cuerpo de la página, que es lo que nos interesa.

Un caso algo excepcional es IE. No recuerdo bién en qué versión empezó a comportarse con más lógica (y menos sentido común, admitámoslo), pero daba por hecho que el body debía ocupar todo el HTML, y que aún sin tener contenido, no debía colapsar la altura. Si a un bloque hijo le metíamos en el código fuente al menos un break, ya mostraba una altura (mínima) de 1em , una reserva de espacio para el texto, aún sin declararle altura; que se veía como una franja, una línea gruesa de su color de fondo. En los otros navegadores si no hay relleno, la caja no aparece, y si algún ancestro (como body) no tiene puesta su altura, colapasa.

Este ejemplo es e-le-men-ta-lí-si-mo, pero grafica y permite probar el aserto.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>

<style type="text/css">
//body {height:100%; width:100%; }
body {background-color: yellow; }
#alfa {height: 100%; width: 100%; background-color: red; }
#bravo {height: 100%; width: 100%; background-color: lime; }
</style>
</head>
<body>

<div id=alfa> <!-- acá hay un break -->
<div id=bravo> <!-- acá no --></div></div>
</body>
</html>

La verdad que cuando abandoné el otro tema, borré todo lo que había empezado a hacer.
Una pena, porque algún ejemplo hubiese servido para éste.

Bueno, el post vale para mover el foco a otra interpretación : que el primer bloque ocupe el alto y ancho del panel (cualesquiera que estos fueren) y sus hermanos queden abajo, visibles sólo con desplazamiento.