如何让外部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; 
}