Erstellen fester Höhe Fußzeile mit Flexbox

Question

Ich erstelle einen Container mit einer Flexbox mit 3 Zeilen, die eine Kopfzeile, den Körper und die Fußzeile enthält. Die Höhe des Kopf- und Fußzeile müssen fest bleiben, während der Körperteil variieren kann und Scrollen liefert, wenn ihr Inhalt es sichtbare Höhe überschreitet:

html

<div class="container"> 
    <div class="header"> 
    Header 
    </div> 
    <div class="contentBody"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div> 
    <div class="footer"> 
    <span class="footerMessage">Message goes here</span> 
    <span class="footerBtn">OK</span> 
    <span class="footerBtn">Cancel</span> 
    </div> 

css

.container { 
    display: flex; 
    flex-direction: column; 
    max-height: 50vh; 
} 

.header { 
    height: 20px; 
    background-color: #c0c0c0; 
} 

.contentBody { 
    flex-grow: 1; 
    overflow-y: scroll; 
} 

.footer { 
    background-color: #c0c0c0; 
    display: flex; 
    flex-direction: row; 
} 

.footerMessage { 
    flex-grow: 1; 
} 

.footerBtn { 
    padding: 5px; 
    background-color: #ff0000; 
    margin-left: 10px; 
} 

Wenn Sie Führen Sie das Geigenmuster aus und passen Sie die Breite des angezeigten Ergebnisses an. Die Höhe der Fußzeile bleibt nicht fixiert. Wenn Sie es verkleinern, bleiben die roten Schaltflächen in der Fußzeile nicht in der Fußzeile. Wie kann ich das beheben? Tausend Dank!

https://jsfiddle.net/Deepview/bktwkcgk/3/

Answer 1

Betrachten Sie die folgenden Eigenschaften auf Ihre .footer Zugabe:

.footer { 
    background-color: #c0c0c0; 
    display: flex; 
    flex-direction: row; 
    height: 20px; 
    min-height: 20px; 
    white-space: nowrap; 
} 

eine Höhe und min Höhe einstellen wird sichergestellt, dass die Fußzeile fixiert bleibt, auch mit einem sehr kleinen Bildschirmgröße wird overflow: hidden machen Stellen Sie sicher, dass Elemente außerhalb Ihrer Fußzeile nicht angezeigt werden (das überlaufende Element wird ausgeblendet). white-space: nowrap; wird vermieden, dass Ihre Fußzeile abgeschnitten wird und in die zweite Zeile fällt.

Updated fiddle