Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    height of the browser

    Is there a way to make a div's height exactly the browser's height (without scrolling)?

    I've tried height:100%; but that only makes it as big as the content.

  • #2
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Are you making your container 100% or your actual div? if so it could be everything colliding.

  • #3
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    100% is based on the parent element

    Code:
    <div class="container">
     <div class="rada"></div> <!-- if container is 400px, then rada height: 100% is 400px; -->
    </div>
    you have to set

    Code:
    body, html {
     height: 100%;
    }
    and everything leading up to your div has to be 100% height (of the body) as well. ie: .container { height: 100%; }

    ----

    I believe you can also use position: absolute;, as long as no elements leading up to the child are position: relative;

    Code:
    body, html {
     height: 100%;
    }
    
    .rada {
     position: absolute;
     height: 100%;
    }
    Code:
    <body>
     <div class="container" style="height: 400px;"> <!-- Cannot be position: relative; -->
       <div class="rada"></div>
     </div>
    </body>
    Last edited by Sammy12; 07-31-2011 at 09:09 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •