Using calc() with a dynamic value?

Question

I am wondering if this is possible: I have a header that can contain a variable amount of text. Below that I have another element which I want to take up the remaining height of the page.

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

Normally I would do this using calc, eg:

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

Where 75px is the set height of .header.

But in this example, the .header element is dynamic and does not have a set height. Only a padding and font-size are set.

To complicate things, this also uses the Foundation Grid layout, which makes me nervous about using display: table (.title and .menu sit side by side on desktop, but stacked on mobile) .

Is there anyway to get the height of the dynamic header element (without resorting to JQuery)?

Answer 1

You can use flexbox and set .content to flex-grow: 1 so that it will fill to grow the available 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>