使用calc（）和動態值？

Question

我想知道這是否可能：我有一個頭可以包含可變數量的文本。在下面我有另一個元素，我想佔據頁面的剩餘高度。

<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> 

通常我會做到這一點使用計算，例如：

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

如果是960x75像素的.header設定高度。

但在此示例中，.header元素是動態元素，並且沒有設置高度。只設置填充和字體大小。

使事情複雜化，這也使用基礎網格佈局，這使我緊張地使用display: table（.title和.menu坐在桌面上，但堆疊在手機上）。

有無論如何獲得動態頭元素的高度（不訴諸JQuery）？

Answer 1

您可以使用flexbox並將.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

希望這會有所幫助。