CSS - Height of a box

About

This page is about the height of a box.

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

HTML has a height attribute that applies to a really limited set of element. It applies not on a div element for instance.

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.

Its definition is defined by the box sizing property. By default, this property has the value content-box and define the height as the height of the content box.

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>

Calculation

The below properties have an influence on the height calculation

Unit

100vh = 100% of the viewport height

Javascript - Scripting

DOM Get

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

DOM Set

<div id="box">
Box
</div>
#box {
    height:20px;
    width:20px;
    padding:4px;
    border: 2px solid #FFF;
    background-color:#D5D8CB;
}
let element = document.getElementById("box") ;
element.style.width="400px"

JQuery

jqueryElement.height();

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

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); 

Documentation / Reference


Powered by ComboStrap