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

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 353
    Comment on it

    Hello Readers,

    Today will discuss the possible way to make div height 100% according to screen size. Let's see about the first method -


    So, below is the CSS code -

    html, body{
        height: 100%;
    }
    .box{
        height: 100%;
        background: green;
    }

    How it works -

    HTML and body tag in HTML have auto height so if we have a div in the body section and add div height 100% this will not working because div's parent's element have not height (), it will not and object (if div has not content).

    Now I changed HTML, body height 100% now div show with 100% height if I just change one of them (body or HTML) height 100% div height 100% also not working.
     

    html, body{
        height: 50%;
    }

    If you changed height of both to  half 50% (Probably you need it) then div height will be 25% because HTML height 50% and body height will 50% of HTML height and result with the show as 25% height.

     

    Another way is to make div height 100vh. vh is view port height you can read here about this

    div{
        height: 100vh;
    }

 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: