Cómo estirar la altura del div para llenar el div principal

107

Tengo una página con divs como a continuación

<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 estilo como;

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 de div B2para llenar (o estirar) div completo B(marcado con un borde verde) y no quiero cruzar el div D de pie de página. Aquí hay una demostración de violín en funcionamiento (actualizada). ¿¿Como puedo resolver esto??

css Alfredo
fuente

38

Simplemente agréguelo height: 100%;al #B2estilo. min-heightno debería ser necesario.

Bucear
fuente

4

Lo será, si el dif está vacío.

x10

39

La mala respuesta # B2 será tan alta como #B pero no se estirará para llenar el espacio restante como se solicitó

nido

3

¿No funciona esto para un div con un floatpadre diferente al de su padre?

Don Cheadle

cubre el B1 y ocupa todo el espacio; /

mikus

1

Esto claramente no funciona, altura: 100% es 100% del contenedor (creo que la mayoría de las veces toda la ventana gráfica): su altura será más de la deseada.

BT

25

Suponga que tiene

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

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

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

Con flexbox, puedes

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

#root {
  width: 100%
}

onmyway133
fuente

10

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

Utilice la propiedad "min-height"
Tenga cuidado con los rellenos, márgenes y bordes :)

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;
}

x10
fuente

1

no ... llena toda la página con un margen superior. solo quiero llenar el div específicoB

Alfred

Funciona correctamente en Chrome y Firefox. Si esto no funciona para usted, puede usar Faux Columns

x10

funciona, pero está cortando el pie de página div id= D. No quiero que cruce div d

Alfred

2

height:100%falta un punto y coma para el #B2estilo.

Emil

5

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

Lo que funcionó, al menos en Firefox, fue esto

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

En la medida en que la ventana real no se vea forzada a desplazarse, el div conserva sus límites hasta el borde de la ventana durante todo el cambio de tamaño.

Espero que esto le ahorre a alguien algo de tiempo.

Leo Smith
fuente

5

Si vas a usar B2 con fines de estilo, puedes probar este "truco"

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

jsFiddle

Teneff
fuente

1

Esto funciona, gracias. Por cierto, debería serlo margin-bottom: -9999px;. Te estás perdiendo el menos.

Gaui

1

Posición relativa del contenedor B2

Posición superior B2 + de la altura restante

Altura de B2 + altura B1 o altura restante

Dmytro Yurchenko
fuente

¡Configurar el nodo principal en la posición relativa resolvió mi problema no relacionado! ¡Gracias!

Deejers

0

Yo uso height: stretch;. Aquí puede encontrar algunos detalles sobre el uso.

Ihor
fuente

-4

Lo resolvería con una solución javascript (jQUery) si 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);

NKCSS
fuente

8

Es posible que desee agregar eso a su pregunta :)

NKCSS

48

¿No es suficiente la ausencia de una etiqueta javascripto jquery?

kapa

1

Esto también es totalmente innecesario. CSS ha recorrido un largo camino en los últimos años. Verifique flex-box y calc ().

Shawn Whinnery

1

Flexbox no admite <IE10 :(

Constant Meiring

@ConstantMeiring La verdadera pregunta es, ¿a alguien le importa siquiera <IE10? ;)

Clonkex

Cómo estirar la altura del div para llenar el div principal - CSS

Respuestas: