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 only on HTML elements that have an intrinsic dimension (ie image, …). It applies not on a div element for instance.
Example
Length value
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>
Percentage Value
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 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.
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.
Syntax
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.
More, see the following article: CSS - Box sizing (property and definition)
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:
- 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.
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.height="60px"
JQuery
jqueryElement.height();
jQueryElement.prop('scrollHeight')
// or
jQueryElement[0].scrollHeight
Calculation
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);