如何設置與屏幕分辨率成正比的div高度？

我看到有很多類似的問題，但我找不到解決方案。如何設置與屏幕分辨率成正比的div高度？

我的頁面有這樣的結構：

<body> 
    <div id="whole_page"> 
    <div id="header"></div> 
    <div id="main"> 
      <div id="img_container"></div> 
      <div id="img_container"></div> 
      <div id="img_container"></div> 
     </div> 
    </div> 
    </body>

我的CSS是：

html,body{ 
    height:100%; width:100%; 
    padding-top:50px; 
} 

#whole_page{ 
    height:calc(100%-50px); width:100%; 
} 

#header{ 
    position:fixed; 
    height:50px; // header 
} 

#image_container{ 
    width:100%; 
    height:30%; 
}

我要設置「主」的高度，以100％（窗口高度）減去頭的高度（50像素）。此外，我希望每個ID爲「image_container」的div爲「主」div的30％和widonws寬度的100％。因此，在需要滾動之前，我在頁面中有大約3個div。

問題是％似乎根本不起作用。因爲我沒有寫它們（使用Chrome的開發工具嘗試）。

其實我使用bootstrap來填充header/main的內容，但據我所知，這不應該給高度造成問題。

任何線索？在此先感謝

來源

2014-06-06 dragonmnl

檢查'calc（）'：https：//developer.mozilla.org/en-US/docs/Web/CSS/calc – melancia

你的關鍵問題是，你沒有改變#main的高度。你的CSS和HTML之間也有一個缺失類型，在你使用'id =「img_container」'的HTML中，在你的CSS中引用了#image_container。我將CSS和HTML分別更改爲'.img_container'和'class =「img_container」'。我還注意到，自頂層之外的空間數量超過了你的#header所需的空間量的兩倍，因爲'padding-top：50px;'被應用於html和body。

下面是代碼：

<div id="whole_page"> 
    <div id="header" style="background-color: yellow;"></div> 
    <div id="main"> 
     <div class="img_container" style="background-color: red;"></div> 
     <div class="img_container" style="background-color: blue;"></div> 
     <div class="img_container" style="background-color: green;"></div> 
    </div> 
</div>

和

html, body { 
    height:100%; 
    width:100%; 
} 
body { 
    margin: 0; 
    padding-top:50px; 
} 
#whole_page { 
    height: calc(100% - 50px); 
    width: 100%; 
} 
#header { 
    position: fixed; 
    height: 50px; 
    width: 100%; 
    top: 0; 
} 
#main { 
    height: 100%; 
} 
.img_container { 
    width: 100%; 
    height: 30%; 
}

PS - 增添色彩的一些標籤，所以我可以看到他們。您可以從'#header'和'.img_container'標籤中刪除樣式屬性。

編輯 - 下面是一個的jsfiddle：http://jsfiddle.net/xiondark2008/DJJ2d/

EDIT2 - 只需側思想， '高度：計算值（100％-50px）;'是一個無效屬性，至少在chrome中，然而'height：calc（100％ - 50px）;' 是一個有效的屬性，至少在chrome中。

來源

2014-06-06 14:37:07

謝謝。它真的幫了很多:) – dragonmnl