css要素の高さ - 高さが変化する要素の高さ

Question

aye folks！

css3で動的な高さの計算が可能ですか？私は何かを見つけることができませんでした..多分私は私の検索のために間違った言葉を使用しています。

問題：100％の高さからnav要素の高さを差し引いたiframeを含めるサイトがあります。残念ながら、nav要素は必ずしも同じ高さではありません（1つのデバイスの44px、他のデバイスの36pxなど）

これを計算する方法はありますか？またはこれを正しく動作させるにはnav-elementの高さを修正する必要がありますか？

Answer 1

次の2つの要素のラッパーにdisplay: flexプロパティを使用することができますので、あなただけの要素の高さが変更されるサイズや幅を決定する必要があります。

html, body, #wrapper { 
    height: 100%; 
} 

#wrapper { 
    display: flex; 
    flex-direction: column; 
} 

#frame-fill { 
    flex-grow: 1; 
} 

<div id="wrapper"> 
    <div>HEADER DYNAMIC</div> 
    <iframe id="frame-fill" src=''></iframe> 
</div> 

フレックスのブラウザサポートを必ず確認してください。その新しいコンセプト。

Answer 2

確かに！ 私は、nav要素の高さが画面サイズに依存していると仮定しています。そのため、メディアクエリで異なる高さを与えることができます。

/*put your conditions here*/ 
    @media (min-height: 500px), (min-width: 580px) { 
     iframe{ 
      height: calc(100% - 44px); 
     } 
    } 
    /*put your conditions here*/ 
    @media (max-height: 1000px), (min-width: 580px) { 
     iframe{ 
      height: calc(100% - 36px); 
     } 
    } 

詳細情報：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp