Rest des Bildschirms ausfüllen

Question

Ich möchte eine einfache Seite, wo ich einen Hauptabschnitt und eine linke Seitenleiste mit zwei Abschnitten habe. Ich kenne die Höhe des oberen Abschnitts nicht, und ich möchte den unteren Abschnitt ausfüllen, um den Rest des Bildschirms auszufüllen. Wie Sie auf der Geige unten sehen können (versuchen Sie die Größe des Fensters zu ändern, wenn Sie die Seitenleiste nicht sehen), setzt Höhe 100% die Höhe des Balkens plus die eigene Höhe und ich möchte nur den Rest des Platzes ausfüllen. Ich habe andere Fragen hier gefunden, wo Leute vorschlagen, Vh minus Top-Bar zu verwenden, aber ich weiß nicht die Höhe der oberen Leiste. Gibt es andere Möglichkeiten?

Beachten Sie, dass der untere Abschnitt das Scrollen unterstützen muss, wenn der Inhalt die Bildschirmhöhe überschreitet.

https://jsfiddle.net/segato/agprcbg0/2/

html, 
body, 
.wrapper, 
.wrapper-inner, 
.sidebar, 
.main { 
    height: 100%; 
    } 

Answer 1

Sie können es mit der Flexbox. Der springende Punkt ist, die #bottom div so flexibel zu machen, dass sie den gesamten verbleibenden vertikalen Raum einnehmen kann.

Updated Fiddle

Answer 2

entfernen einfach die definierte Höhenattribute. Also:

#bot { 
    background-color: red; 
    margin: 0px !important; 
    padding: 0px !important; 
    overflow-y: hidden !important; 
    overflow-x: hidden; 
} 

html, body, .wrapper, .wrapper-inner, .sidebar { 
    height: 100%; 
} 

Aktualisiert: https://jsfiddle.net/0da8b9oj/1/