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

105

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?

css Alfred
quelle

38

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

Schnupfen
quelle

4

Es wird sein, wenn der Dif leer ist.

x10

39

schlechte Antwort # B2 wird so groß wie #B sein, aber nicht strecken, um den verbleibenden Raum wie gefragt zu füllen

Nest

3

funktioniert das nicht für ein div mit einem anderen als floatdem übergeordneten?

Don Cheadle

es deckt die B1 ab und nimmt den ganzen Raum ein; /

mikus

1

Dies funktioniert eindeutig nicht, Höhe: 100% sind 100% des Containers (ich denke meistens das gesamte Ansichtsfenster) - seine Höhe wird größer als gewünscht sein.

BT

25

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

onmyway133
quelle

10

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

x10
quelle

1

nein .. es füllt die ganze Seite mit einem oberen Rand. Ich möchte nur die spezifische Div füllenB

Alfred

Es funktioniert korrekt in Chrom und Firefox. Wenn dies für Sie nicht funktioniert, können Sie Faux Columns

x10

es funktioniert, aber es schneidet die Fußzeile div id= D. Ich möchte nicht, dass es div d

Alfred

2

height:100%Es fehlt ein Semikolon für den #B2Stil.

Emil

5

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.

Leo Smith
quelle

5

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

Teneff
quelle

1

Das funktioniert, danke. Übrigens sollte es sein margin-bottom: -9999px;. Ihnen fehlt das Minus.

Gaui

1

B2 Containerposition relativ

Spitzenposition B2 + der verbleibenden Höhe

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

Dmytro Yurchenko
quelle

Das Setzen des übergeordneten Knotens auf die relative Position hat mein nicht verwandtes Problem gelöst! Vielen Dank!

Deejers

-4

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

NKCSS
quelle

8

Vielleicht möchten Sie das zu Ihrer Frage hinzufügen :)

NKCSS

48

Ist das Fehlen eines javascriptoder jqueryTags nicht genug?

Kapa

1

Dies ist auch völlig unnötig. CSS hat in den letzten Jahren einen langen Weg zurückgelegt. Kasse Flex-Box und calc ().

Shawn Whinnery

1

Flexbox unterstützt <IE10 :(

Constant Meiring

@ConstantMeiring Die eigentliche Frage ist, interessiert sich überhaupt jemand für <IE10? ;)

Clonkex

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

Antworten: