Get the top coordinate self & # 8594; calc (100vh - y)
I have an element and I want it to take up all the space underneath it to the bottom of the browser window.
Is there some way to get the y offset of an element for this? I don't know how to determine y:
.occupy-space-below {
max-height: calc(100vh - y);
}
+3
Chris
source
to share
1 answer
Instead of using calc
(since your top item is of unknown height) ...
you can achieve this easily 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>
+5
Roko C. Buljan
source
to share