So dehnen Sie die Div-Höhe, um das übergeordnete Div-CSS zu füllen

Ich habe eine Seite mit Divs wie unten

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

mit Styling als;

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

Ich möchte die Höhe von div anpassen, um das B2gesamte div B(mit einem grünen Rand markiert ) zu füllen (oder zu dehnen ) und nicht das Fußzeilen-Div D zu kreuzen. Hier ist eine funktionierende Geigen- Demo (aktualisiert). Wie kann ich das lösen?

Fügen Sie einfach height: 100%;das #B2Styling hinzu. min-heightsollte nicht notwendig sein.

Angenommen, Sie haben

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

Mit normalem CSS können Sie Folgendes tun. Siehe eine funktionierende App unter https://github.com/onmyway133/Lyrics/blob/master/index.html

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

Mit Flexbox können Sie

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

#root {
  width: 100%
}

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

Verwenden Sie die Eigenschaft "min-height".
Seien Sie vorsichtig bei Polstern, Rändern und Rändern :)

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

Was zu meinem Zweck passte, war es, ein Div zu erstellen, das innerhalb des gesamten Browserfensters immer durch einen festen Betrag begrenzt war.

Was zumindest bei Firefox funktionierte, war dies

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

Sofern das eigentliche Fenster nicht zum Scrollen gezwungen wird, behält das div bei jeder Größenänderung seine Grenzen zum Fensterrand bei.

Hoffe das spart jemandem etwas Zeit.

Wenn Sie B2 für Stylingzwecke verwenden möchten, können Sie diesen "Hack" ausprobieren.

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

jsFiddle

B2 Containerposition relativ

Spitzenposition B2 + der verbleibenden Höhe

Höhe von B2 + Höhe B1 oder verbleibende Höhe

Ich würde es mit einer Javascript-Lösung (jQUery) lösen, wenn die Größen variieren können.

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

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