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>

通常我会使用calc来做这件事，例如：

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

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

但在此示例中，.header元素是动态的，没有设置的高度。只设置了填充和字体大小。

为了使事情变得复杂，这也使用了基金会网格布局，这使我对使用display: table（.title和.menu并排坐在桌面上，但堆叠在移动设备上感到紧张）

无论如何都要获得动态头元素的高度（不使用JQuery）？

Answer 1

我用一支小笔来展示使用弹性盒子做到这一点的方法，它涉及改变你的标记：

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

希望这会有所帮助。

Answer 2

您可以使用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>

使用具有动态值的calc（）？

2 个答案: