This page is about the height of a box.
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.
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 height should be set on the parent. This is not the height 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:
<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>
document.querySelector("button").addEventListener("click",
function (event) {
let parent = document.querySelector(".parent");
parent.style.height=`${parent.offsetHeight}px`;
}
);
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)
The below properties have an influence on the height calculation
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:
<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);