CODEWITHSUNDEEP
csscalc
MeltingDog
MeltingDog

Reputation: 15488

Using calc() with a dynamic value?

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

Upvotes: 2

Views: 6040

Answers (2)

Michael Coker
Michael Coker

Reputation: 53709

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>

Upvotes: 3

ANshul Sharma
ANshul Sharma

Reputation: 325

I made a small pen to show the way to do this using flex box, it involved changing your markup a bit:

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

So the content will always take the available space inside the content div.

check the whole pen: http://codepen.io/anshul119/pen/yMYeLa

hope this helps.

Upvotes: 1

Related Questions