使用基於百分比的寬度和高度計算沒有出現的矩形div

Question

使用基於百分比的寬度和高度計算的兩個矩形div不會出現在我身上。這裏是所有從身體的HTML：

<div class="brd"></div> 
<img src="res/logo-art.png" alt="Logo Artwork" align="middle" width="100%"> 
<button class="btn btn-default" id="login">Login</button> 
<button class="btn btn-default" id="register">Register</button> 
<div class="brd"></div> 

這裏是CSS：

.brd { 
    position: relative; 
    width: 100%; 
    height: calc(50% - 315px); 
    background: #606060; 
} 

頁面的高度爲854px，所以我計算出每個div的高度是112px。 png圖片的高度是475px。檢查員顯示每個div的高度爲0px。

Answer 1

即使沒有計算，這也行不通。爲了表達HIGHT它是更好地使用屏幕「VH」單位（視高度）的百分比：

.brd { 
    position: relative; 
    width: 100%; 
    height: calc(50vh - 315px); 
    background: #606060; 
} 

http://codepen.io/1GR3/pen/amLKVG

Answer 2

有時它發生在我一個div元素上，基於百分比的寬度和高度不工作。我曾經通過給我所有的div的父母一個CSS寬度/高度來解決它。所以，如果你的div.brd是body兒子，這樣做：

html, body { 
    width: {some_value}; 
    height: {some_value}; 
} 

它應該做的伎倆。

Answer 3

.brd { 
    position: relative; 
    width: 100%; 
    height: calc(50% - 315px); 
    background: #606060; 
    height: -moz-calc(50% - 315px); 
    height: -webkit-calc(50% - 315px); 
} 

Try this. It works