html element with height attribute 100% don't cover the whole window

I want to have a footer at the bottem of my page. I have followed a lot of different tutorials, but it won't work. when i scale my screen until there is a scrollbar the footer is at the bottem of the window and not at the end of the page.

this is my css:

 html {
    height: 100%;
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
body{
    position: relative;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100%;
    padding-bottom: 40px;
    margin: 0;
}
#footer{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin-left: 16%;
    margin-right: 16%;
    font-size: 11px;
    margin-top: 20px;
    margin-bottom: 15px;
    width: 68%;
}

html structure:

<!DOCTYPE html>
<html lang="nl">
    <body>
          <nav>
                ....
          </nav>
          <div id="content">
                ....
          </div>
          <div id="footer">
                ....
          </div>
    </body>
</html>

Images:

the footer at the bottem of the window

when I scroll down

Is there somebody who can help me?

thank you in advance!

Solution

There must be something else, because your code works ok with that example. Are you using iframes? Please try to put a snippet

Also if you have an element with float positioning you should put a <div style='clear:both>`before the #footer div, floating elements could do a lot of weird things if you don't clear.

html {
    height: 100%;
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
body{
    position: relative;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100%;
    padding-bottom: 40px;
    margin: 0;
}
#footer{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin-left: 16%;
    margin-right: 16%;
    font-size: 11px;
    margin-top: 20px;
    margin-bottom: 15px;
    width: 68%;
}

<html>
  <body>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div id="footer"> footer</div>
    </body>
  </html>