You can set the height of a DIV to 100% using the CSS ‘height’ property. Here’s an example of how to do this:

HTML:

<div class="container">
    <div class="child">Child content</div>
</div>

CSS:

html, body {
    height: 100%; /* set body and html to 100% height */
}
.container {
    height: 100%; /* set container to 100% height */
}

This will create a container div with a child div inside it. The ‘html’ and ‘body’ elements have the ‘height’ property set to 100%, which means that the container div will take up 100% of the height of the browser window.

The container div also has the ‘height’ property set to 100%, which means that the child div will take up 100% of the height of the container div.

You should be careful when using height:100% on elements, it’s only works when it’s parent element have set the height value and it’s parent’s parent and so on.

For example if you have 2 divs, first one named parent and second one named child. To set the child div to 100% of the parent div’s height, you need to set the ‘height’ property of the parent div first, then you can set the height of the child div to 100%.

.parent {
    height: 200px;
}
.child {
    height: 100%;
}

This way the child div’s height will be 200px.

You can also use other CSS properties such as ‘min-height’ or ‘max-height’ to set the minimum or maximum height of the div respectively.

Also Read:

Categorized in:

HTML & CSS

Tagged in:

, ,