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

希望这会有所帮助。