CSS - Height of a box

This page is about the height of a box.

• From How it's calculated
• To How it's defined

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.

Example:

#height {
    height:50px;
    width:50px;
    padding:3rem;
    background-color:#D5D8CB;
}

<div id="height">
Box
</div>

The below properties have an influence on the height calculation

• CSS - Box sizing (property and definition)
• CSS - line-height Property

100vh = 100% of the viewport height

<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.

jqueryElement.height();

jQueryElement.prop('scrollHeight') 
// or
jQueryElement[0].scrollHeight

If your screen height is 1000px, your element height will be equal to 900px (100% of 1000px and minus 100px).

height: calc(100% - 100px); 

• height