3使用flex CSS的窗格佈局，即使在頁面滾動時，頁眉始終位於頂部

Question

我想爲我的網頁設置3窗格佈局。 即使頁面滾動，標題也會始終保持在最高位置，並且具有固定的高度。

頁腳將有一個固定的高度，並保持在底部，但不會固定到查看端口的底部，每當頁面滾動時，我的意思是如果中心區域內容超過高度，頁腳可以向下移動而不是堅持查看港口底部。

中間內容區域將在窗口調整大小時自動調整，以便它將剩餘的所有空間完全佔用。

更好的是，如果這是用flex CSS完成的，或者罰款，如果其他方法是好的。 我已經用flex自己試了一下，但是如果中心區域的內容高度不一樣，那麼在窗口調整大小時整個佈局表現會很怪異。看到附圖是一個粗略的想法。

如果你回答這個問題，請提供一些工作小提琴。

Answer 1

部首= 已知高度和粘
含量= 可變高度
頁腳= 已知高度和在底部（如果內容長得比粘到內容）

使用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>