Get top coordinate of self --> calc(100vh - y)

Question

I have an element and I want it to occupy all the space below it up to the bottom of the browser window.

can I somehow get the y offset of the element for this? I don't know how to define y:

.occupy-space-below {
    max-height: calc(100vh - y);
}

That needs js, but there are many other ways - https://stackoverflow.com/q/90178/483779 — Stickers, May 23 '17 at 17:29

score 5 · Answer 1 · answered May 23 '17 at 17:31

Instead of using calc (since your upper element is of unknown height)...
you can easily achieve this using flexbox

/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}


.flex-column {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.grow{
  flex: 1;
  background: gold;
}

<div class="flex-column">

  <div>
    I<br>have <br>unknown<br>height
  </div>

  <div class="grow">
    occupy space below
  </div>

</div>

Get top coordinate of self --> calc(100vh - y)

1 Answers1