Menu
I'm working on a project where the former developer used:
.main-sidebar {
height: calc(100vh);
}
I have no way to contact him/her anymore, and I would like to understand what is the difference (if any) between the two methods.
(Is this the right place to ask this question?)
848
For example, height: 100%; applied to an element is relative to the size of its parent. In contrast, height: 100vh will be 100% of the viewport height regardless of where the element resides in the DOM.
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.
We use css property height: calc( 100% - div_height ); Here, Calc is a function. It uses mathematical expression by this property we can set the height content div area dynamically.
The calc() function takes a single expression as its parameter, with the expression's result used as the value. The expression can be any simple expression combining the following operators, using standard operator precedence rules: + Addition.
VHheight: 100vh; means the height of this element is equal to 100% of the viewport height.
example:
height: 50vh;
If your screen height is 1000px, your element height will be equal to 500px (50% of 1000px).
CALCheight: calc(100% - 100px); will calculate the size of the element by using the value of the element.
example:height: calc(100% - 100px);
If your screen height is 1000px, your element height will be equal to 900px (100% of 1000px and minus 100px).
*I think your former developer didn't need to use calc() if he/she didn't want to calculate value.
134
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
