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

Can you use flexbox? codepen.io/anon/pen/gmaape

Michael Coker
– Michael Coker

2017-02-28 06:20:41 +00:00
Commented Feb 28, 2017 at 6:20 — Michael Coker
– Michael Coker, Commented Feb 28, 2017 at 6:20
@MichaelCoker thanks! Want to make that an answer?

MeltingDog
– MeltingDog

2017-02-28 06:39:55 +00:00
Commented Feb 28, 2017 at 6:39 — MeltingDog
– MeltingDog, Commented Feb 28, 2017 at 6:39

Michael Coker · Accepted Answer · 2017-02-28 15:53:06Z

3

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>

answered Feb 28, 2017 at 15:53

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

john k Sep 12 at 18:14

now I just need to make the 'long text' part scroll while the others remain fixed :/

Michael Coker Sep 13 at 19:11

Can you describe the layout a little more? Maybe make a codepen with what you're working with and describe what you want to be different?

ANshul Sharma · Accepted Answer · 2017-02-28 07:24:54Z

1

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.

answered Feb 28, 2017 at 7:24

ANshul Sharma

3555 silver badges23 bronze badges

Collectives™ on Stack Overflow

Using calc() with a dynamic value?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related