CSS - Height of a box
Table of Contents
1 - About
This page is about the height of a box.
- From How it's calculated
- To How it's defined
2 - Articles Related
3 - Property
The height property applies only if the formatting context is a block. (ie inline block will not respond to the height attribute)
The height property specifies the height of boxes.
More, see the following article: CSS - Box sizing (property and definition)
Example:
#height {
height:50px;
width:50px;
padding:3rem;
background-color:#D5D8CB;
}
<div id="height">
Box
</div>
4 - Calculation
The below properties have an influence on the height calculation
5 - Unit
100vh = 100% of the viewport height
6 - Javascript - Scripting
6.1 - DOM
<div id="box">
Box
</div>
#box {
height:50px;
width:50px;
padding:4px;
border: 2px solid #FFF;";
background-color:#D5D8CB;
}
let element = document.getElementById("box") ;
console.log("Box-Sizing defines the height has been the height of the "+window.getComputedStyle(element).boxSizing);
console.log("Client Height: "+element.clientHeight);
console.log("Offset Height: "+element.offsetHeight);
console.log("Scroll Height: "+element.scrollHeight);
where:
- clientHeight includes:
- the height
- and vertical padding.
- offsetHeight includes:
- the height,
- vertical padding,
- and vertical borders.
- scrollHeight includes the height of the contained document (would be greater than just height in case of scrolling), vertical padding, and vertical borders.
6.2 - JQuery
jqueryElement.height();
jQueryElement.prop('scrollHeight')
// or
jQueryElement[0].scrollHeight
6.3 - Calculation
If your screen height is 1000px, your element height will be equal to 900px (100% of 1000px and minus 100px).
height: calc(100% - 100px);