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 c
ristian_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.