パーセントベースの幅と高さの計算を使用した長方形のdivは

Question

％の幅と高さのパーセンテージを使用した2つの矩形の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ですので、私は112pxになるように、それぞれのdivの高さを働きました。 PNG画像の高さは475ピクセルです。インスペクタは、各divの高さが0pxであることを示します。

Answer 1

計算しなくても動作しません。

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

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

Answer 2

時にはそれが私には、div要素にその割合に基づく幅と高さを起こる：使用することをお勧めし画面「VH」単位（ビューポートの高さ）の割合で絶頂を表現するために、動作しません。私はすべての私の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