Css collapsing padding-bottom

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%; 
     } 

Я тестировал на Firefox, Chrome, IE, Opera и Макстона, и она работала. Тем не менее CSS - сумасшедший цыпленок.

Answer 2

Почему ваша позиция нижнего колонтитула абсолютно! если вы удалите позицию: absolute; заполнение остается ..