動的値でcalc（）を使用していますか？

Question

私はこれが可能かどうか疑問に思っています。私は可変量のテキストを含むことができるヘッダーを持っています。その下には、ページの残りの高さを取りたい別の要素があります。 75pxが.headerの設定高さである

.content { 
    height: calc(100vh - 75px); 
} 

：

<div class="header row"> 
    <div class="title column large-5">Potentially very long text</div> 
    <div class="menu column large-7">Menu items</div> 
</div> 
<div class="content"> 
</div> 
<div class="footer"> 
</div> 

通常、私は、この使用CALC、例えばを行うだろう。

しかし、この例では、.header要素は動的であり、高さが設定されていません。パディングとフォントサイズのみが設定されます。

複雑なことに、これはFoundation Gridのレイアウトも使用していますので、display: table（.titleと.menuをデスクトップに横並びに並べて、モバイルに積み重ねてください）に気を遣います。

動的ヘッダー要素の高さを取得する方法はありますか（JQueryを使用せずに）

Answer 1

フレックスボックスを使用して、.content〜flex-grow: 1を設定すると、使用可能な領域が拡大します。

body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 100vh; 
 
    margin: 0; 
 
} 
 
.content { 
 
    flex-grow: 1; 
 
    background: #eee; 
 
}

<div class="header row"> 
 
    <div class="title column large-5">Potentially very long text</div> 
 
    <div class="menu column large-7">Menu items</div> 
 
</div> 
 
<div class="content"> 
 
</div> 
 
<div class="footer"> 
 
</div>

Answer 2

私はこの使用して、フレックスボックスを行う方法を示すために、小さなペンを作った、それはあなたのマークアップビットを変更関与：

CSS：

.container { 
    display: flex; 
    flex-direction: column; 
    height: 250px; // whatever you want here 
} 

.header { 
    width: 100%; 
    background: red; 
    padding: 10px; 
} 

.content { 
    background: yellow; 
    width: 100%; 
    flex-grow: 1; 
} 

ので、コンテンツが常に利用可能なスペースを取りますコンテンツdiv内

ペン全体をチェックしてください。http://codepen.io/anshul119/pen/yMYeLa

は、このことができます願っています。