Feste Höhe Kopf- und scrollbaren div in variabler Höhe div

Question

diese Demo Layout Bedenken Sie:

<div style="height: 100%"> 
    <div style="height: 100px;">Header</div> 
    <div style="overflow: scroll; height: auto;"> 
     ...content... 
    </div> 
</div> 

(JSFiddle)

Der innere Inhalt div als Höhe wie viel verbrauchen sollte möglichst (dh 100% - 100px) und scrollen seinen Inhalt. Ist das möglich?

(Browser-Kompatibilität ist kein Thema.)

Answer 1

Stellen Sie die Höhe des Dokuments zu 100% mit diesen Arten:

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

Sie können dann die Höhe des Überlaufgarnitur div spezifisch mit:

height: calc(100% - 100px); 

Fiddle 1

---

Die modernere Art und Weise dies zu tun ist durch der Behälter macht ein flexbox, mit diesen Arten:

height: 100%; 
display: flex; 
flex-direction: column; 

Dann diese Stile für den Header verwenden:

height: 100px; 
flex: none; 

Und einfach overflow: scroll; für den rollbaren Inhalt.

Fiddle 2