Css collapsing padding-bottom - css

Question

I have serious troubles with my css layout.
This is my workingbase: http://jsfiddle.net/UeVm8/1/
<div id="container">
<div id="header">
<h1>
Site name
</h1>
</div>
<div id="content">
<h2>
Page heading
</h2>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
<div id="footer">
Copyright © Site name, 20XX
</div>
html, body{
margin: 0;
height: 100%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
padding-top:10px;
padding-bottom:10px;
}
#container
{
position:relative;
margin: 0 auto;
width: 600px;
background:#333;
min-height: 100%;
height:auto !important;
overflow: hidden !important;
}
#header
{
background:#ccc;
padding: 20px;
}
#header h1 { margin: 0; }
#content
{
padding: 20px;
padding-bottom:50px;
}
#footer
{
position:absolute;
background:#ccc;
bottom:0;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
width:100%;
}
The site should always be 100% height at minimum with small distances to top and bottom.
There shouldn't be scrollbars, except the content is too big. Then it should fit to the content and the distances to top and bottom should stay.
But when you resize the window, the padding at the bottom disappears!?!
I already tried different settings and found a solution for Firefox: http://jsfiddle.net/UeVm8/7/
But this solution does not work in Chrome and IE.
I am totally annoyed by this nasty inconsistence in the CSS implementations.
Does anybody know how to solve this issue for all (modern) browsers?
Thanks.
PS: It's an stylesheet only for desktops.

Answer 1

I finally found the answer! :)
As mentioned I already found a solution for Firefox, but it was not working on Chrome.
After some fiddling I also had a solution for Chrome, which wasn't working on Firefox.
I think the issue is that there seems to be a bug in Google Chrome.
But I could combine both solutions by just overwriting settings just for chrome with some special selector.
The CSS solution: http://jsfiddle.net/UeVm8/8/
html, body{
margin: 0;
height: 100%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
padding-top:10px;
padding-bottom:10px;
}
#container
{
position:relative;
margin: 0px auto 20px;
width: 600px;
background:#333;
min-height: 100%;
height:auto !important;
overflow: hidden !important;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#container{
margin: 0px auto 0px;
}
html, body{
overflow:auto;
}
}
#header
{
background:#ccc;
padding: 20px;
}
#header h1 { margin: 0; }
#content
{
padding: 20px;
padding-bottom:50px;
color:grey;
}
#footer
{
position:absolute;
background:#ccc;
bottom:0;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
width:100%;
}
I tested it on Firefox, Chrome, IE, Opera and Maxton and it worked.
Nevertheless CSS is a crazy chick.