CSS - Height of a box



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 only on HTML elements that have an intrinsic dimension (ie image, …). It applies not on a div element for instance.


Length value

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

#height {
    display: flex; justify-content: center; align-items: center; /* center the text */
<div id="height">

Percentage Value

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

.parent {
   border: 1px solid skyblue
.parent .child {
    height:50%; /* 300 . 50 % = 150px */
    display: flex; justify-content: center; align-items: center; /* distribute the box */
<div class="parent">
    <div class="child">Box</div>

The height should be set on the parent. This is not the height after rendering

Calculated Percentage Value After rendering

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.


  • 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>
<button>Set the parent height property to the rendered height</button>
  • We set via javascript the calculated height of the parent.
    function (event) {
        let parent = document.querySelector(".parent");
  • 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 1) 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.

Css Box Size Content

More, see the following article: CSS - Box sizing (property and definition)


The below properties have an influence on the height calculation


100vh = 100% of the viewport height

Javascript - Scripting


<div id="box">
#box {
    border: 2px solid #FFF;
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);


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


<div id="box">
#box {
    border: 2px solid #FFF;
let element = document.getElementById("box") ;



// or


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

Documentation / Reference

Discover More
CSS - (Box) Positioning (Scheme)

CSS This section is all how boxes are positioned / laid out on the page. boxcontent (text, image) a box located at the right side and its content at the left side a box taking the whole width...
CSS - Absolute Positioning (Relative / Absolute / Fixed > Absolute or Static > Absolute )

absolute positioning is a positioning model that occurs when a box has the absolute value as position property. When this is the case, the absolute box is positioned: * from the first ascending box...
CSS - Box Size

Sizing of a box The width and the height of a box are dependent of the: layout and of the box sizing parameters The sizes are calculated with respect to the edges of a rectangular box called a containing...
Firebug Box Sizing
CSS - Box sizing (property and definition)

The box-sizing property is used to alter the default box model used to calculate widths and heights of elements. The width and height are defined as the width and height: of the or of the depending...
CSS - Fixed Positioning (Anchored viewport positioning)

fixed positioning is a positioning scheme where the offsets (coordinates) are calculated relative to an anchored viewport. (ie the visible part of the window, an iframe, ..). anchored means that scrolling...
CSS - Length Value (Size)

Lengths refer to horizontal or vertical measurements. The format of a length value is a number (with or without a decimal point) immediately followed by a unit identifier where: number is positive...
CSS - Transitions

in CSS. Transition properties create smooth transitions (using timing functions) between different values property of two different element state. The transition short property is where: transition-durationtransition-duration:...
CSS - line-height Property

On block level elements, the line-height property specifies the space between the text lines and is known as the Leading where: the value is one of: normal, - let the browser choose a reasonable...
Css Flex Align Content
CSS Flex - Flex Property (Length definition)

CSS The flex-property is a shorthand property that specifies the components of a flex length: flex-grow (Default to 1) factor that determines how much the item will grow relative to the rest. flex-shrink...
Card Puncher Data Processing
Datacadamia - Data all the things

Computer science from a data perspective

Share this page:
Follow us:
Task Runner