Search code examples
htmlcssheightfootersticky-footer

CSS: how come html, body height: 100% is more then 100%?

hey, i was trying to do a bottom sticky footer link test and but it kept being more then 100% meaning it scrolled a litle bit..

so i made a simple HTML code, without any additions but its still more than 100%, see here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="he" lang="he" dir="rtl" id="bangler">
    <head>
        <title>my title</title>
        <style type="text/css">
        html, body, #wrapper { height: 100%; }
        body > #wrapper { height: auto; min-height: 100%; }
        </style>
    </head>
    <body>
        <div id="wrapper">aa</div>
    </body>
</html>

the thing is, it scrolls just a little bit more then 100% meaning about 5-10px more.. this is really strange, on both IE and Firefox !!

Thanks in advance !

Solution

  • It's because of the default body margins. Add this to your styles:

    body { margin: 0; padding: 0; }