3 Pane Layout mit Flex CSS mit Header immer oben auf der Seite selbst Scrollen

Question

Ich versuche, ein 3-Fenster-Layout für meine Webseite zu haben. Die Kopfzeile würde auch beim Blättern auf der Seite immer oben bleiben und eine feste Höhe haben.

Die Fußzeile hat eine feste Höhe und würde unten bleiben, wird aber nicht immer auf der Unterseite des Ports angezeigt, wenn die Seite gescrollt wird. Wenn der Inhalt des mittleren Bereichs die Höhe überschreitet, kann die Fußzeile nach unten verschoben werden Hafen unten.

Der mittlere Inhaltsbereich passt sich bei der Fenstergrößenanpassung automatisch so an, dass er den verbleibenden verbleibenden Platz vollständig einnimmt.

Besser, wenn dies mit Flex CSS oder gut getan wird, wenn ein anderer Ansatz gut ist. Ich habe es selbst mit flex versucht, aber wenn der Inhalt der Center-Bereich in der Höhe variiert dann verhält sich das gesamte Layout Verhalten auf Fenstergröße seltsam. Siehe angehängtes Bild für eine grobe Idee.

Bitte, wenn Sie diese Frage beantworten, stellen Sie einige Arbeitsgeigen zur Verfügung.

Answer 1

Kopf = Bekannte Höhe und klebrig
Inhalt = Variable Höhe
Footer = Bekannte Höhe und unten (wenn Inhalt wächst als zum Inhalt Stick)

Verwenden Sie CSS calc

html, body{ height:100%; margin:0;} 
 

 
header{ 
 
    position: fixed; 
 
    z-index:10; 
 
    top:0; 
 
    height:50px; 
 
    width:100%; 
 
    background: hsl(0, 80%, 70%); 
 
} 
 

 
main{ 
 
    position:relative; 
 
    padding-top: 50px; /* header height */ 
 
    min-height: calc(100vh - 80px); /* 100vh - header - footer */ 
 
    background: hsl(150, 80%, 70%); 
 
} 
 

 
footer{ 
 
    position:relative; 
 
    height:30px; 
 
    background: hsl(200, 80%, 70%); 
 
}

<header>This is header 50px</header> 
 
<main>Main content calc px (addd long content and footer will follow)</main> 
 
<footer>Footer 30px</footer>