Set Div Height Equal to Browser Height -100% Height of Div

In this tutorial you will know how to set the height of div to 100% using Only Css. No extra code skill needed just copy the code and paste it and you'll done.

Share

To set the Height of Div to 100% Make parent div Height 100%

If you are trying to set the height of div to 100%. It probably never happen because you have to set the div height equal to browser height using CSS. So we can make it possible by setting the parent div to 100 percent and your parent div isandtags. Go to your style and write like this html,css { height:100%; }. then try to set your container or any other div height to 100% it will set.

NOTE: If you’re thinking the height of any div will be 100% you are wrong. Set the Parent Div’s first.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Set DIV Height to 100% Using CSS</title>

        <style type="text/css">

            html, body {
                height: 100%;
                margin: 0px;
            }
            .container {
                height: 100%;
                background: #f0e68c;
            }
        </style>

    </head>
<body>

    <div class="container">
        The height of this DIV element is equal to the 100% height of its parent element's height.
    </div>

</body>
</html>

According to the above Example i set the height of html,body to height of 100% so i can give height to any div to 100% with in the body. Then you can clearly see that i give 100% height of  container div. Now what ever i write it will give me 100% height of container.

Why this happen because i already said html,body are set to height: auto; by default. so we remove this property and set it to 100% so it take cover the full height. This is the way you can set the div height equal to browser height of any inside DIV.

Checkout the Demo Here

 

Leave a Reply

Your email address will not be published. Required fields are marked *