mozilla firefox for absのためにcalcでcalcを使う方法

Question

私はlike a div to be 100% height minus 197pxを各画面に表示します。私は以下のようにCSS関数calを使いました。

<style> 
#div1 { 

    left: 300px; 
    height: calc(100% - 197px); 

    border: 1px solid black; 
    background-color: yellow; 

} 
</style> 

p>Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</p> 
<div id="div1">Some text...</div> 

それは私がposition: absolute;

私の問題は、絶対位置が私の前のコードの一部との競合を作成することです追加したとき、それは唯一の作品のFirefoxを除き、ほとんどのブラウザ上で、これまでに動作します。だから私の質問どのように絶対的な位置なしでmozilaのためのCSSのcalcを使用する？すべてのMozillaとSafari、ChromeとIEの場合

Jsfiddle

Answer 1

あなたは絶対位置を必要としない、あなたが持つdiv要素の親を持っている必要があります指定された高さ。

.wrap{ 
    height:100vh; 
} 

又は

.wrap{ 
    height:250vh; 
} 

HTML：

<div class="wrap"> 
    <p>Create...</p> 
    <div id="div1">Some text...</div> 
</div> 

• http://jsfiddle.net/Dxn5d/23/
• http://jsfiddle.net/Dxn5d/24/

ここの

詳細：

• http://caniuse.com/#search=calc
• https://developer.mozilla.org/en/docs/Web/CSS/calc

更新：画像付き

：

<div class="wrap"> 
    <img id="div1" src="http://externalapp.websoftghana.com/clean/decoupes/4000.jpg"> 
</div> 

CSS

#div1 { 
    left: 300px; 
    height: calc(100% - 197px); 
    border: 1px solid black; 
    background-color: yellow; 
    float:left; 
} 
#div1 img{ 
    height:100%; 
} 
.wrap{ 
    height:100vh; 
} 

更新：

http://jsfiddle.net/Dxn5d/29/これは、画像の上部のみラップのdivおよび表示のための高さを設定します。

#div1 { 
    left: 300px; 
    height: calc(100% - 197px); 
    border: 1px solid black; 
    background-color: yellow; 
    float:left; 
    overflow:hidden; 
} 
#div1 img{ 
    height:auto; 
} 
.wrap{ 
    height:100vh; 
} 

Answer 2

すべてのバージョンこのコードは

サポート

height:clac(100% - 197px); 
height:-webkit-clac(100% - 197px); 
height:-moz-clac(100% - 197px);