Machen <div> füllen Sie die Verbleibende Höhe
Es ist Bootstrap 3. Ich will einfach nur mein split sidebar
sich in zwei Abschnitte. Der untere Teil sollte hoch genug sein, um dem Inhalt anzupassen, während der Obere Abschnitt sollte füllen Sie die Verbleibende Höhe der Eltern. Im folgenden ist der nächstgelegene, dass ich das erreichen kann mit meinen begrenzten HTML - /CSS-Fähigkeiten:
Mein HTML:
<body>
<div class="container-fluid">
<div class="sidebar col-md-3" style="background-color: lightyellow">
<div class="topClass" style="background-color: lightcoral;">
Should fill the remaining height of the parent
</div>
<div class="bottomClass" style="background-color: lightcyan;">
Should be high enough to fit its contents
A few lines of text <br />
A few lines of text <br />
A few lines of text <br />
A few lines of text <br />
</div>
</div>
</div>
</body>
Mein CSS:
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
display: block;
}
.sidebar .topClass {
position: absolute;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
left: 0;
right: 0;
}
.sidebar .bottomClass {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Sehe ich eine sehr ähnliche Probleme bei Google gelistet Maschine, aber in meinem Fall weiß ich nicht die Höhe der anderen <div>
, so denke ich, dass ich nicht verwenden können, die neuen calc
Funktion.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Habe ich eine Lösung, die für Chrom-und Chrom-nicht aber für FF und ich habe nicht testen Sie es auf weiteren Browsern.
HTML:
CSS:
Und das ist, was es aussieht: Demo
Nicht zu benutzen brauchen
postion:fixed
oderposition:absolute
. Verwendentable
undtable-row
das gewünschte Ergebnis zu erhalten.DEMO
overflow: scroll
nach oben <div> hilft auch nicht. Oder vielleicht bin ich etwas fehlt?Einem Freund von mir zeigte mir eine bessere Lösung mit
flex layout
das funktioniert zumindest bei Firefox und Chrome/Chromium.HTML:
CSS:
Ich auch aktualisiert, die fiddle: JSFiddle
Versuchen Sie dies:
Fügen Sie einfach Höhe 100% in die topClass tag
KORRIGIERT HTML: