CSS - Height of a box

This page is about the height of a box.

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

When a absolute length value is set, the value applied directly to the box

#height {
    height:100px;
    width:100px;
    display: flex; justify-content: center; align-items: center; /* center the text */
    background-color:#D5D8CB; 
}

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

When a percentage value is set, the value is a percentage from the height of the parent.

.parent {
   height:300px;
   border: 1px solid skyblue
}
.parent .child {
    height:50%; /* 300 . 50 % = 150px */
    width:100px;
    display: flex; justify-content: center; align-items: center; /* distribute the box */
    background-color:#D5D8CB; 
}

<div class="parent">
    <div class="child">Box</div>
</div>

The CSS percentage value applies only on a fix value set on the height of the parent.

If you want to applies on the calculated height of the parent, you need to set it via javascript.

Example:

• The html with a box at 300px and a box at 50% of the parent.

<div class="parent">
    <div class="child" style="height:300px">Box 300px</div>
    <div class="child" style="height:calc(50%)">Box 50%</div>
</div>
<button>Set the parent height property to the rendered height</button>

• We set via javascript the calculated height of the parent.

document.querySelector("button").addEventListener("click",
    function (event) {
        let parent = document.querySelector(".parent");
        parent.style.height=`${parent.offsetHeight}px`;
    }
);

• Result:
  • Without clicking on the button: the 50% applies on the initial height property of the parent. Roughly, the box is 50% smaller than the line height
  • By clicking on the button, you will set the rendered height on the parent and the child will be resized to 50% of the rendered height of the parent.

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.

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.

<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.height="60px"

jqueryElement.height();

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

With the calc function. If your parent height is 1000px, your element height will be equal to 900px (100% of 1000px and minus 100px).

height: calc(100% - 100px); 

• Height Specification
• height
• Specification Css-4