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.

InformationsquelleAutor dotNET | 2014-08-26
Schreibe einen Kommentar