Menu
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);
}
263
This uses the CSS calc() function to subtract 100px from 100vh ( 1vh being one percent of the view-port's height) and uses the result as the value of the height property. The box-sizing forces the browser to include padding , and border s, in the calculated height of the element.
A height of 100vh corresponds to the maximum possible viewport height. Since the initial viewport height is smaller, the body element with a min-height of 100vh initially exceeds the viewport height regardless of its content.
height() It returns the current height of the element. It does not include the padding, border or margin. It always returns a unit-less pixel value. Note: The height() will always return the content height, regardless of the value of CSS box-sizing property.
Why does 100vh Issue Happen on Mobile Devices? I investigated this issue a bit and found out the reason. The short answer is that the browser's toolbar height is not taken into account. If you want to go deep on why this happens, I found this Stack Overflow thread very helpful.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
