CSS/HTML - why does height:100% cause vert. scroll bars?

Discussion in 'Webmastering & Programming' started by vsboxerboy, Oct 12, 2012.

  1. vsboxerboy

    vsboxerboy 2[H]4U

    Messages:
    3,662
    Joined:
    Oct 17, 2005
    I've taken my page down to the simplest possible form, and I'm still getting a problem where the vertical scroll bars appear. It seems that 100% for height is really using a bit more than that. Is there something that I'm doing wrong?

    Looking at my Chrome tools, I can see that body is 1183px x 1515px and body is 1167px x 1515px

    HTML:


    Code:
    <html>
        <head>
            <link href="http://www.mydomain.com/style.css" rel="stylesheet">
        </head>
        <body></body>
    </html>


    CSS:


    This works fine
    Code:
    html{height:99%;}
    body{height: 99%;}
    Code:
    html, body {height:99%;}
    All of these cause vertical scroll bars to appear (height goes past edge)
    Code:
    html{height:100%;}
    body{height: 99%;}
    Code:
    html{height:99%;}
    body{height: 100%;}
    Code:
    html{height:100%;}
    body{height: 100%;}
    Code:
    html, body {height:100%;}
     
  2. krogen

    krogen [H]ard|Gawd

    Messages:
    1,077
    Joined:
    Jul 22, 2009
    Are you sure there is no padding or margin defined anywhere? I'm pretty sure body has margins defined by default in a lot of browsers, including Chrome.

    height: 100% will often not do what you want either, unless you use absolute positioning.

    Also, make sure you define a DOCTYPE, otherwise you will see weird issues to happen in Internet Explorer.
     
  3. vsboxerboy

    vsboxerboy 2[H]4U

    Messages:
    3,662
    Joined:
    Oct 17, 2005
    That's what I'm thinking but I've noticed the same thing in both chrome and FF. Usually I use a DOCTYPE, but for simplicity sake, it was omitted here.
     
  4. commodore

    commodore Limp Gawd

    Messages:
    297
    Joined:
    Dec 29, 2002
    Always include a DOCTYPE .. you don't even know the crazy stuff i've encountered because of the omission of the one line of code.

    For 100% height use absolute positioning as mentioned before.

    <body><div style="position:absolute; top:0px; left:0px; height: 100%; width:100%;"></body>

    This will work cross-browser. I'm using this myself.
     
  5. mastaBlasta

    mastaBlasta Gawd

    Messages:
    605
    Joined:
    Jan 27, 2011
    You need 'overflow:hidden'

    Sounds like you're trying to do something fancy otherwise you wouldn't need height 100% on <body>. For height and width to work consistently well, you should start off with set values in pixels or em, and then start using percentages.

    So for example body:style:width:1000px, height:800px

    But if you want to do fancy stuff like fullscreen background images and such, then by all means use all percentages
     
  6. dustandechoes

    dustandechoes n00b

    Messages:
    14
    Joined:
    Apr 6, 2012
    the body element, as stated earlier in the thread, has paddings and margins which you need to reset. Don't use overflow:hidden, unless you're sure you don't ever want the user to be able to scroll the page.

    Code:
    html, body { margin:0; padding:0; width:100%; height:100% }
    
     
  7. vsboxerboy

    vsboxerboy 2[H]4U

    Messages:
    3,662
    Joined:
    Oct 17, 2005
    Yeah, I don't want to hide the overflow - I just wanted to get rid of the padding / margins that are applied before whatever is specified by me.
     
  8. Excavator

    Excavator Gawd

    Messages:
    678
    Joined:
    Nov 17, 2000
    In this example, both body and #container are 100% height. margin: 0; gets rid of the 8px default margin on the body.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	height: 100%;
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	height: 100%;
    	width: 800px;
    	margin: 0 auto;
    	background: #999;
    }
    </style>
    </head>
    <body>
            <div id="container">
            <!--end container--></div>
    </body>
    </html>
     
  9. l3ender

    l3ender [H]ardness Supreme

    Messages:
    5,339
    Joined:
    Jan 1, 2007