Css坍塌填充底部

Question

我有我的CSS佈局嚴重的麻煩。 這是我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%; 
} 

該網站應該總是有最少有小的距離到頂部和底部100％的高度。 不應該有滾動條，除非內容太大。然後它應該適合內容，並且應該保持頂部和底部的距離。

但是，當您調整窗口的大小時，底部的填充消失了！？！

我已經嘗試過不同的設置，發現Firefox的一個解決方案：http://jsfiddle.net/UeVm8/7/

但這種解決方案並不在Chrome和IE瀏覽器。

我完全被這個討厭的CSS實現不一致所困擾。

有沒有人知道如何解決所有（現代）瀏覽器的這個問題？

謝謝。

PS：這是一個僅適用於桌面的樣式表。

Answer 1

我終於找到答案！ :) 如前所述，我已經找到了Firefox的解決方案，但它不適用於Chrome。 經過一番搗鼓之後，我還有一個針對Chrome的解決方案，它不適用於Firefox。 我認爲問題在於Google Chrome中似乎存在一個錯誤。 但我可以通過覆蓋設置僅用於鍍鉻與一些特殊的選擇器結合這兩種解決方案。

CSS的解決方案：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%; 
     } 

我測試了火狐，Chrome，IE，Opera和馬克斯頓和它的工作。 儘管如此CSS是一個瘋狂的小妞。

Answer 2

爲什麼你的頁腳位置是絕對的？！如果您刪除位置：絕對;填充仍然..