正常「頁腳不能粘在底部」解決方案不起作用

Question

我需要將網頁頁腳定位在瀏覽器窗口的底部，而不僅僅是position: fixed，所以如果窗口大小變小，頁腳不應該增加比父容器內容的底部更深（您必須向下滾動窗口以查看頁腳）。

我最熟悉的解決方案（下）不適合我。建議？

HTML：

<div class="container"> 
    <div class="content"> 
     top content 
    </div> 
    <footer> 
     footer content 
    </footer> 
</div> 

CSS：

body, html { height: 100% } 
.container { 
    margin: 0; 
    min-height: 100%; 
    position: relative; 
    width: 100%; 
} 
.content { 
    padding: 15px; 
    margin-bottom: 36px; 
    width: 1000px; 
} 
footer { 
    background: #00a7d4; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    bottom: 0; 
    color: #fff; 
    font-size: 11px; 
    height: 36px; 
    color: #fff; 
    font-size: 11px; 
    position: absolute; 
    width: 100%; 
} 

Answer 1

嘗試改變下邊距來填充底：

.pageContainer { 
    /* margin-bottom: 36px; */ 
    padding-bottom: 36px; 
} 

http://jsfiddle.net/6HrLu/

適用於Chrome。