如何創建填滿整個屏幕的垂直div？

Question

我有四個的DIV：

• 第一div有一個固定的高度和位於頂部（報頭）。

• 第二個div也有固定的高度，位於第一個div下面。

• 第四個div具有位於底部的固定高度。

• 第三個div將會有一個可變的高度：如果內容小於這個數值，它將會擴展到四個div的總數達到瀏覽器的垂直空間。但是如果內容的高度大於內容的高度，它會跟隨內容的高度。所以在任何時候，我都希望第一個div（標題）粘在頁面的頂部，第四個div（頁腳）粘在頁面的底部。我無法知道內容會有多高。

  頭 頭 頭 頭

CSS文件：

#container { width:800px; height:*; } 
#header { height:200px; } 
#menu  { height:50px; } 
#content { height:*; } 
#footer { height:150px; } 

我能真正做到這一點？如何正確的CSS方式來做到這一點？我感覺這應該不是太難，但我無法在任何地方找到可接受的答案。謝謝。

Answer 1

你可以做的是這樣的：

#content { height: 100vh; /*100% of viewport height*/ 
    margin-top: 250px; 
    margin-bottom: 150px; } 

這樣，它總是會在總屏幕高度的100％。

Answer 2

那麼這翻看起來酷，

JSBin

HTML

<div class="header">Header !</div> 
<div class="menu">Menu !</div> 
<div class="content">Content !</div> 
<div class="footer">Footer !</div> 

CSS

body  { margin: 0; } 
.header { width: 100%; height: 200px; position: fixed; top: 0;  } 
.menu  { width: 100%; height: 50px; position: fixed; top: 200px; } 
.footer { width: 100%; height: 150px; position: fixed; bottom: 0;  } 
.content { width: 100%; position: fixed; top: 250px; bottom: 150px; 
      overflow: auto;            }