Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make a div's height 100% of the browser window?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 209
    Comment on it

    Hello Readers!

    Ever wanted to make a div stretch vertically according to the browser window's height?

    One solution that instantly appears into our mind is height:100%. But this doesn't work as desired. The reason being % a relative unit. So when we give 100% height to a div element, it takes up all the height of its parent element. That surely is, 100% height.

    So, how do we solve this? html and body are parent elements for all other elements, and the default value for these is height:auto;, so we change the height for both of them to 100% and same for the div element that we want to stretch.

    The code will explain you better.

    HTML :

    <body>
        <div class="container">The height of this DIV element is 100% of the browser's window.</div>
    </body>

     

    CSS :

    html, body {
        	height: 100%;
    		margin: 0px;
    }
    
    .container {
    	height: 100%;
    	background: #f0e68c;
            text-align:center;
    }

     

    Try this and you will find the height of your div element is equal to the height of the browser window.

     

    Well, there are some new CSS3 recommendations for this. We have a new unit 'Viewport-height' (vh).

    1 vh= 1%

    Thus, 100 vh= 100%

    Hence, 100vh  is equal to the height of the browser window.

    div {
        height:100vh;
    }

     

    Happy Coding!

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: