cómo estirar div altura para llenar div padre - CSS

tengo una página con divs, como a continuacióncómo estirar div altura para llenar div padre - CSS

<div id="container"> 
    <div id="A"> 
    </div> 
    <div id="B"> 
     <div id="B1"></div> 
     <div id="B2">B2</div> 
    </div> 
    <div id="C"></div> 
    <div id="D"> 
    </div> 
</div>

con un estilo tan;

html, body { 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 
#B, #C, #D { 
    position: absolute; 
} 
#A{ 
    top: 0; 
    width: 100%; 
    height: 35px; 
    background-color: #99CC00; 
} 
#B { 
    top: 35px; 
    width: 200px; 
    bottom: 35px; 
    background-color: #999999; 
    z-index:100; 
} 
#B2 { 
    margin-top: -35px; 
    bottom: 0; 
    background-color: #FFFFFF; 
    width: 200px; 
    overflow: scroll; 
} 
#B1 { 
    height: 35px; 
    width: 35px; 
    margin-left: 200px; 
    background-color: #CC0066; 
} 
#C { 
    top: 35px; 
    left: 200px; 
    right: 0; 
    bottom: 35px; 
    background-color: #CCCCCC; 
} 
#D { 
    bottom: 0; 
    width: 100%; 
    height: 35px; 
    background-color: #3399FF; 
}

Quiero ajustar la altura del div B2 para llenar (o estirar a) toda div B (marcado con un borde verde) y no quiero cruzar pie div D. Aquí es un violín de trabajo demo (actualizado). ¿¿Como puedo resolver esto??

Fuente

2011-04-07 blasteralfred Ψ

sólo tiene que añadir height: 100%; en el #B2 estilo. min-height no debería ser necesario.

Fuente

2011-04-07 14:12:07 Snorbuckle

será, si el DIF está vacía – x10

[violín:] (http://jsfiddle.net/UpGJq/) parece estar bien con un div vacío aquí – Snorbuckle

+10

mala respuesta... # B2 será tan alto como #B pero no estirar para llenar el espacio restante, tal como solicitó – nest

http://jsfiddle.net/QWDxr/1/

Utilice la opción "min-height" propiedad
Sé cuidadoso de Juntas, márgenes y fronteras :)

html, body { 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 
#B, #C, #D { 
    position: absolute; 
} 
#A{ 
    top: 0; 
    width: 100%; 
    height: 35px; 
    background-color: #99CC00; 
} 
#B { 
    top: 35px; 
    width: 200px; 
    bottom: 35px; 
    background-color: #999999; 
    z-index:100; 
} 
#B2 { 
    min-height:100%; 
    height:100% 
    margin-top: -35px; 
    bottom: 0; 
    background-color: red; 
    width: 200px; 
    overflow: scroll; 
} 
#B1 { 
    height: 35px; 
    width: 35px; 
    margin-left: 200px; 
    background-color: #CC0066; 
} 
#C { 
    top: 35px; 
    left: 200px; 
    right: 0; 
    bottom: 35px; 
    background-color: #CCCCCC; 
} 
#D { 
    bottom: 0; 
    width: 100%; 
    height: 35px; 
    background-color: #3399FF; 
}

Fuente

2011-04-07 13:26:24 x10

no .. que llenar la página entera con un margen superior. Solo quiero completar el div específico 'B' –

Funciona correctamente en Chrome y Firefox. Si esto no funciona para usted, puede usar [Faux Columns] (http://www.alistapart.com/articles/fauxcolumns/) – x10

, pero está cortando el pie de página 'div id = D'. No quiero que se div entre –

-5

Me solucionarlo con una solución Javascript (jQuery) si el los tamaños pueden variar

window.setTimeout(function() { 
    $(document).ready(function() { 
     var ResizeTarget = $('#B'); 

     ResizeTarget.resize(function() { 
      var target = $('#B2'); 
      target.css('height', ResizeTarget.height()); 
     }).trigger('resize'); 
    }); 
}, 500);

Fuente

2011-04-07 13:30:11 NKCSS

Estoy buscando una solución de CSS pura ... –

Es posible que desee agregar eso a su pregunta :) – NKCSS

+38

¿No es suficiente la ausencia de una etiqueta 'javascript' o' jquery'? – kapa

Si usted es el uso B2 va a efectos de estilo que puede probar este "Hack"

#B { overflow: hidden;} 
#B2 {padding-bottom: 9999px; margin-bottom: -9999px}

jsFiddle

Fuente

2011-04-07 13:34:05 Teneff

echar un vistazo @ mi violín actualizada aquí http://jsfiddle.net/QWDxr/2/ –

Esto funciona, gracias Por cierto, debe ser 'margin-bottom:. - . 9999px; 'que se está perdiendo el signo menos – Gaui

Lo que se adecuaba a mi propósito era crear un div que siempre estaba delimitado dentro de la ventana general del navegador por una cantidad fija.

Lo que funcionó, al menos en Firefox, era este

<div style="position: absolute; top: 127px; left: 75px;right: 75px; bottom: 50px;">

la medida en que la ventana actual no es forzado a desplazarse, el div conserva sus límites con el borde de la ventana durante todo el redimensionamiento.

Espero que esto ahorre algo de tiempo.

Fuente

2013-08-07 07:21:33

Suponga que tiene

<body> 
    <div id="root" /> 
</body>

Con CSS normal, puede hacer lo siguiente. Ver una aplicación de trabajo https://github.com/onmyway133/Lyrics/blob/master/index.html

#root { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
}

Con FlexBox, puede

html, body { 
    height: 100% 
} 
body { 
    display: flex; 
    align-items: stretch; 
} 

#root { 
    width: 100% 
}

Fuente

2017-07-06 12:34:31 onmyway133

cómo estirar div altura para llenar div padre - CSS

Respuesta

Cuestiones relacionadas