Question

how can I make this layout be always 100%, stick to the bottom and not beyond so no scrollbars are needed?

http://jsfiddle.net/HsPtp/1/

Whatever I do I get some extra space on the bottom.

Answer 1

You are correct in thinking that overflow:hidden will hide some of your content. The scroll bars are appearing because of your height/padding figures:

1. On .colmask you have set height:100%. This is relative to the body.
2. On #header you have set padding-bottom:16px.

This means the full height of your page is 100% + 16px.

Option 1:
If you want your page to have no scrollbars and always show the bottom of the content you need to change your height/padding figures so that they add up to 100%.

Example: http://jsfiddle.net/HsPtp/12/

#header {height:5%;} /* Instead of using padding-bottom */
.colmask {height: 90%;}
#footer {height:4.5%;} /* Not 5% To allow for the 1px border you set */

Option 2:

As long as you know there isn’t going to be any other content other than the footer right down at the bottom you can do this: http://jsfiddle.net/HsPtp/6/

html, body {overflow: hidden;}
#footer {position:fixed; bottom:0;height:20px;} /* height added so effect can be seen */

This essentially will cut off the extra 16px from the #header at the bottom, and then remove #footer from the flow of page and fix it at the bottom. So technically there will be 36px (16px #header padding + 20px #footer height) at the bottom of your page that will be cut off and covered by the footer.