Calculating how much vertical space is used by existing elements?

Question

Let's say I have a Header element which has various content that is determining its height rather than a set property. Is it possible to get that height using CSS only? I want that in order to know how much vertical space I have left on the page and size a video div accordingly.

If I had the dimension set manually I could just use height: calc(100vh - headerHeight);

sample:

<header>
  <p>something</p>
</header>
<div>
</div>

header {
  background-color: yellow;
  margin: 0;
}
p {
  font-size: 2em;
  padding: 0.5em;
  margin: 0;
  background-color: pink;
}
div {
  background-color: blue;
  height: 100vh; /* This should adjust so it doesn't overflow-y.*/
}

hmm. yeah make a wrapper for header and content and flex-grow the content part. — aviya.developer, Jan 23 '20 at 13:58
It can be an idea, and should work ;) So you don't need calc anymore — Sfili_81, Jan 23 '20 at 13:59
That duplicate is so cluttered with irrelevant, age-old answers, I'm voting to re-open. — connexo, Jan 23 '20 at 14:07
@connexo we should then add more answers to the duplicate. As as side note, the duplicate contain answers using Flexbox and CSS grid so it's still relevant. — Temani Afif, Jan 23 '20 at 15:02
2 answers, and no reaction whatsoever to those within more than 7 hours. — connexo, Jan 23 '20 at 21:01

score 1 · Answer 1 · answered Jan 23 '20 at 14:09

1

Simply use a CSS grid. Defining grid-columns with the last column defined in the unit fr (fraction) makes it fill the remaining space.

body {
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
}

header {
  grid-row-start: 1;
  background-color: lightblue;
}

main {
  grid-row-start: 2;
  background-color: #f0f4f8;
  align-self: stretch;
}

<header>
  <p>Hi I'm the header</p>
</header>
<main>Main here</main>

A very similar answer to a very old question (kind of hard to find due to currently having only 8 upvotes): https://stackoverflow.com/a/44908512/3744304

IE 11 also supports CSS grid in its older spec. Please look up the -ms-prefixed property names and add them to your CSS if you need support for such old browsers.

answered Jan 23 '20 at 14:09

connexo

53,704
14
91
128

*kind of hard to find due to currently having only 8 upvotes* --> we should then vote it up to make it more visible. This is the main purpose of voting. – Temani Afif Jan 23 '20 at 15:03
@TemaniAfif I did, but with hundreds of upvotes necessary to realistically make it visible, how do you find enough people that care? – connexo Jan 23 '20 at 15:06
We simply do our part of the job and we hope other will do the same. We cannot do more than this. By the way, we should also *force* people to scroll and to go until the bottom to see the new answers. *lazy* users looking at only the accepted answers aren't really welcome here (IMO) – Temani Afif Jan 23 '20 at 15:11
@connexo Both answers are valid methods. However both require containing the layout in a flex / grid wrapper, which would confine some of the architecture of the layout latter on. – aviya.developer Jan 24 '20 at 10:42

score 1 · Answer 2 · answered Jan 23 '20 at 14:13

1

With flexbox you can achieve that.

html,body {
  margin:0;
  padding:0;
}
.container {
  display:flex;
  flex-direction:column;
  height:100vh;
}
.content {
  background:red;
  flex: 1; //fill the rest of the container
}

<div class="container">
  <header>
    <p>something</p>
  </header>
  <div class="content">
  </div>
</div>

answered Jan 23 '20 at 14:13

phuwin

3,130
4
26
49

Both answers are valid methods. However both require containing the layout in a flex / grid wrapper, which would confine some of the architecture of the layout latter on. – aviya.developer Jan 24 '20 at 10:42

Calculating how much vertical space is used by existing elements?

2 Answers2