Doppelte feste Kopf- und Fußzeile - vorzugsweise dynamisch

Question

Ich bin nicht sicher, ob das, was ich brauche, sogar getan werden kann, aber ich möchte eine flex (oder CSS einschließlich Tabellenlayout, wenn das funktioniert) nicht klebrig) Kopf- und Fußzeilen wie folgt:

***header one - fixed - dynamic height*** 
***header two - fixed - dynamic height*** 
***content - scrolls as needed*** 
***fixed one - fixed - dynamic height*** 
***footer two - fixed - dynamic height*** 

ich Tage gesucht und versucht, die Dinge und haben wahrscheinlich am nächsten kommen mit this js fiddle die mit Ausnahme Gesamt arbeitet ausgegeben haben, dass der Kopf- und Fußzeile Inhalt wickeln nicht, ob sie die Seite nicht überschreiten Breite. Ich kann bei Bedarf feste Höhen berücksichtigen, würde aber dynamische bevorzugen. Auch wenn es darauf ankommt, wird manchmal Kopfzeile zwei und Fußzeile nicht auf der Seite sein.

Alle Gedanken sind willkommen!

Answer 1

Hier denke ich, dass das funktioniert.

Sie müssen Max-Höhe drin haben sonst wird die Spalte erweitern, wählte ich 100vh.

Codepen Demo

Ich nehme an, Sie nicht bedeuten, dass die Kopf-/Fußzeilen position:fixed waren, wie sie dann aus dem Dokumentenfluss sein würde und konnte nicht die Höhe der nicht-positionierte Elemente beeinflussen.

Stattdessen nehme ich an, Sie meinen, dass der Hauptinhalt zwischen ihnen passen muss, unabhängig von ihrer Größe und Überlauf wie erforderlich.

Ich habe einen "expandierenden" Hover zum Inhaltsbereich hinzugefügt, damit der Überlauf wirksam wird.

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.container { 
 
    height: 100vh; 
 
    max-height: 100vh; 
 
    width: 80%; 
 
    margin: auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
div { 
 
    flex: 0 0 auto; 
 
} 
 
.one { 
 
    background: lightblue; 
 
} 
 
.two { 
 
    background: lightgreen; 
 
} 
 
main { 
 
    flex: 1 1 auto; 
 
    overflow-Y: auto; 
 
    background: pink; 
 
} 
 
main:hover .expander { 
 
    height: 1000px; 
 
} 
 
p { 
 
    padding: 0 1em; 
 
    margin: 0;

<div class="container"> 
 
    <div class="header one"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, alias mollitia. Laborum et cupiditate</p> 
 
    </div> 
 
    <div class="header two"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex excepturi molestiae voluptates nesciunt, recusandae error,</p> 
 
    </div> 
 
    <main> 
 
    <div class="expander"></div> 
 
    </main> 
 
    <div class="footer one"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur incidunt, esse quaerat illum ipsa. Reiciendis corrupti aliquid placeat</div> 
 
    <div class="footer two"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum rerum tempore dolor tenetur expedita eligendi nemo numquam veniam laboriosam.</p> 
 
    </div> 
 
</div>