title: Css collapsing padding-bottom
body: <p>I have serious troubles with my css layout.
  This is my workingbase: <a href="http://jsfiddle.net/UeVm8/1/" rel="nofollow">http://jsfiddle.net/UeVm8/1/</a></p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div id="header"&gt;
      &lt;h1&gt;
          Site name
      &lt;/h1&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
      &lt;h2&gt;
          Page heading
      &lt;/h2&gt;
      &lt;p&gt;
          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. 
      &lt;/p&gt;
  &lt;p&gt;
          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. 
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="footer"&gt;
      Copyright © Site name, 20XX
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>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%;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>But when you resize the window, the padding at the bottom disappears!?!</p>
  
  <p>I already tried different settings and found a solution for Firefox: <a href="http://jsfiddle.net/UeVm8/7/" rel="nofollow">http://jsfiddle.net/UeVm8/7/</a></p>
  
  <p>But this solution does not work in Chrome and IE.</p>
  
  <p>I am totally annoyed by this nasty inconsistence in the CSS implementations.</p>
  
  <p>Does anybody know how to solve this issue for all (modern) browsers?</p>
  
  <p>Thanks.</p>
  
  <p>PS: It's an stylesheet only for desktops.</p>