¿Cómo hacer que div escale verticalmente hasta abajo?

Tengo la siguiente situación, presentada en la imagen. El div gris es el padre de divs magenta y azul. Magenta div escala verticalmente con el contenido. Me gustaría que el div azul siempre se escale hasta la parte inferior del gris que contiene, div. He buscado y probado varias combinaciones, pero todas tienen un efecto nulo.¿Cómo hacer que div escale verticalmente hasta abajo?

alt text

edición: Problema resuelto! El contenedor necesita un desbordamiento: oculto, y el div que quiero estirar hasta el fondo (azul) necesita relleno: 1000px; margin-bottom: -1000; (o más grande si es necesario)

Fuente

2009-06-30 Keyframe

Si necesita soporte desde IE6 en adelante, la respuesta es: No puede hacerlo solo en css.

Existen diferentes soluciones a escala realmente el div o simplemente hacer que aparezca así:

Se puede utilizar una imagen de fondo para el div gris (si todo lo que necesita es el fondo para estirar toda la camino hacia abajo)
puede usar javascript para calcular la altura de la div gris y aplicarlo a la div azul

Hay una opción de CCS utilizando un gran relleno y una igualmente gran margen negativo, pero yo no recuerdo si funciona para todos los navegadores y yo ca no encuentras el articulo en este momento

Editar: El gran margen de solución de relleno css/negativo:

El artículo está hablando de Firefox 1.5 y Safari 2, de modo que no sé si todavía funciona, pero here it is.

Fuente

2009-06-30 19:10:00 jeroen

Recuerdo esa solución con un gran margen negativo: lo he usado una vez, pero por el amor de Dios no puedo recordar los detalles exactos de implementación ni puedo encontrarlo en línea. – Keyframe

La JavaScript para hacerlo sería ...

<div id="yourDiv" style="background-color: Blue; width: 150px;"> 
    Hello 
</div> 

<script type="text/javascript"> 
    var div = document.getElementById('yourDiv'); 

    div.style.height = document.body.clientHeight + 'px'; 
</script>

Editar:

Comprobar this enlace para obtener clientHeight en distintos navegadores ...

Fuente

2009-06-30 19:14:03

Gracias, pero javascript no es una opción en este momento. – Keyframe

¿Alguna razón particular por la cual javascript no es una opción? Si tiene jquery disponible, puede hacer algo como var greydiv = $ ("# greydivselector"). Height(); $ ("# bluedivselector"). Height (greydiv); Y podría jugar con compensaciones. ¿Pensamientos? – Acorn

Acepto, ¿por qué JavaScript no es una opción? Probablemente una solución más fácil. –

interior de su div padre, si estableces "float: right" en tu div azul y juegas con tu altura en porcentaje (altura: 100%;), creo que deberías lograr lo que estás pidiendo.

Dado que el div azul es un elemento secundario de su div gris, la altura máxima de su div azul no debe exceder el div principal. A menos que me falta algo aquí ...

Además, si está flotando su div azul a la derecha, asegúrese de colocarlo antes del div magenta en su marcado.

Acorn

Fuente

2009-06-30 19:14:49 Acorn

No se olvide de especificar la altura del elemento principal, o los elementos flotados no se 'mantendrán en el interior' del padre – MrChrister

En mi experiencia de ajustar la altura de la DIV azul al 100% no funciona. La única vez que he querido esto fue tener el DIV azul con su propio fondo, para resolverlo necesitas tener solo el fondo del DIV gris que incluya el fondo azul del otro DIV.

Fuente

2009-06-30 19:26:00 jrglasgow

aka falsa columna - Estoy tratando de evitar eso, ya que en mi configuración actual necesitaría para agregar otro contenedor div ... si no aparece nada más, lo haré. Gracias. – Keyframe

Otra forma de establecer la altura del 100% en los objetos HTML es el uso de estilos:

<html> 
<head> 
<style> 
    html, body { 
    height: 100%; 
} 

#mydiv { 
    height: 100%; 
    background-color:red; 
}   
</style> 
</head> 
<body> 
<div id="mydiv">aaa</div> 
</body> 
</html>

Fuente

2009-06-30 19:41:16 pedrofernandes

Para que los objetos secundarios trabajen con una altura del 100%, el padre debe tener una altura de arreglo – MrChrister

no si declara html y etiqueta corporal en altura: 100% – pedrofernandes

ponga html en mi publicación en su navegador y vea la magia :) – pedrofernandes

La clave es tener una altura establecida en el contenedor principal. A continuación, la altura: 100% trabaja

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Divs</title> 
<style type="text/css" media="all"> 
#main { 
    height:30em; 
    width:30em; 
    background-color:#999999; 
    padding:1em 1em 0px 1em; 
} 
.inner { 
    width:5em; 
} 
#blue { 
    float:right; 
    background-color:#0000FF; 
    height:100%; 
} 
#magenta { 
    float:left; 
    background-color:magenta; 
} 
</style> 
</head> 
<body> 
<div id="main"> 
    <div class="inner" id="blue"> 
     1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10 
    </div> 
    <div class="inner" id="magenta"> 
     1<br/>2<br/>3<br/>4<br/>5<br/>6 
    </div> 
</div> 
</body> 
</html>

Fuente

2009-06-30 19:45:21 MrChrister

, sí, pero ¿y si no sé la altura de los padres por adelantado? Quiero que se escale con el contenido div izquierdo ... Me pregunto por qué una altura mínima no funcionaría tan bien en esta situación, debe ser algún tipo de supervisión. – Keyframe

Ah sí, la trampa. – MrChrister

Tengo esto para trabajar (en Chrome en cualquier caso) mediante el establecimiento de div de los padres:

position: absolute;

y div del niño:

height: 100%;

Fuente

2012-12-02 18:24:06 jLi

¿Cómo hacer que div escale verticalmente hasta abajo?

Respuesta

Cuestiones relacionadas