如何讓外部div繼承內部非浮動div的高度？

Question

我試圖阻止瀏覽器窗口高度下降時，頁腳重疊在上面的元素上。我意識到這是因爲其他div container沒有繼承內部div的高度，即#cart。

如何讓外部div繼承內部非浮動div的高度？

這裏是頁面，它的發生：

http://fine-grain-2.myshopify.com/cart

請參見下面的屏幕截圖的說明：

我怎麼想它是：

當瀏覽器窗口高度變得太短時它如何。

HTML：

<div class="container"> 
    <div id="cart" class="cart clearfix"> 
</div> 

<footer class="clearfix"> 
    <div class="additional-info"> Copyright © 2013 fine grain </div> 
</footer> 

CSS：

.container:after { 
    clear: both; 
    content: " "; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 
.container { 
    height: 100%; 
    margin: 0 auto; 
    padding: 0; 
    position: relative; 
    width: 960px; 
} 

.row:after, .clearfix:after { 
    clear: both; 
} 
.clearfix:before, .clearfix:after, .row:before, .row:after { 
    content: " "; 
    display: block; 
    height: 0; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; 
} 
.clearfix:before, .clearfix:after, .row:before, .row:after { 
    content: " "; 
    display: block; 
    height: 0; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; 
} 
#cart { 
    margin: 20px auto 0; 
} 

footer { 
    clear: both; 
    margin: 0 auto; 
    padding: 0 0 1em; 
    position: relative; 
    text-align: center; 
} 

.additional-info { 
    font-size: 0.8em; 
} 

Answer 1

@novicePrgrmr改變容器類這樣

.container { 
    min-height: 100%;//min-height 
    margin: 0 auto; 
    padding: 0; 
    position: relative; 
    width: 960px; 
}