使用具有动态值的 calc()？

Question

我想知道这是否可行：我有一个 header 可以包含可变数量的文本。在它下面我有另一个元素，我想占据页面的剩余高度。

<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 来执行此操作，例如：

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

其中75px是.header的设置高度。

但在本例中，.header 元素是动态的，没有设置高度。仅设置了填充和 font-size。

使事情复杂化的是，这还使用了 Foundation Grid 布局，这让我对使用 display: table 感到紧张（.title 和 .menu 并排坐在桌面上，但堆叠在手机）.

有没有办法获取动态 header 元素的高度（不求助于 JQuery）？

Answer 1

我制作了一支小笔来展示使用 flex box 执行此操作的方法，它涉及稍微更改您的标记：

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里面可用的space。

检查整笔：http://codepen.io/anshul119/pen/yMYeLa

希望这对您有所帮助。

Answer 2

您可以使用 flexbox 并将 .content 设置为 flex-grow: 1，这样它将填充以增加可用的 space。

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>

使用具有动态值的 calc()？

Using calc() with a dynamic value?

css

calc