Foros del Web » Creando para Internet » CSS »

Ajustar div al 100% del espacio del que disponga

Estas en el tema de Ajustar div al 100% del espacio del que disponga en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/03/2012, 09:25
 
Fecha de Ingreso: abril-2011
Mensajes: 169
Antigüedad: 10 años, 5 meses
Puntos: 4
Exclamación Ajustar div al 100% del espacio del que disponga

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.
__________________
MiniMonigotes.com | Juegos flash online gratis - ¡Entra ya!
  #2 (permalink)  
Antiguo 15/03/2012, 09:48
Avatar de luna690  
Fecha de Ingreso: marzo-2012
Ubicación: Barcelona
Mensajes: 61
Antigüedad: 9 años, 6 meses
Puntos: 3
Respuesta: Ajustar div al 100% del espacio del que disponga

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

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

Saludos.
  #3 (permalink)  
Antiguo 15/03/2012, 12:42
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 12 años, 3 meses
Puntos: 269
Respuesta: Ajustar div al 100% del espacio del que disponga

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.
  #4 (permalink)  
Antiguo 15/03/2012, 17:03
 
Fecha de Ingreso: marzo-2012
Mensajes: 30
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: Ajustar div al 100% del espacio del que disponga

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.
  #5 (permalink)  
Antiguo 15/03/2012, 21:47
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 18 años, 10 meses
Puntos: 317
Respuesta: Ajustar div al 100% del espacio del que disponga

Cita:
Iniciado por super_rayo Ver Mensaje
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.

Etiquetas: 100%, ajustar+div
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 04:08.