CSS - Height of a box

1 - About

This page is about the height of a box.

  • From How it's calculated
  • To How it's defined
HTMLhas a height attribute that applies to a really limited set of element. It applies not on a div element for instance.

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.

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>

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

7 - Documentation / Reference


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap