Menu
px – It defines the font-size in terms of pixels. ( 96px = 1in) vh – Relative to 1% of the height of the viewport. vw – Relative to 1% of the width of the viewport.
calc() The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length> , <frequency> , <angle> , <time> , <percentage> , <number> , or <integer> is allowed.
The full form of VH is viewport height.
Yes: #specificElement { height: calc(100vh - 100px); box-sizing: border-box; } 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.
It does work indeed. Issue was with my less compiler. It was compiled in to:
.container {
min-height: calc(-51vh);
}
Fixed with the following code in less file:
.container {
min-height: calc(~"100vh - 150px");
}
Thanks to this link: Less Aggressive Compilation with CSS3 calc
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