css - 外側の div が内側の浮動していない div の高さを継承するようにするにはどうすればよいですか?

Question

ブラウザー ウィンドウの高さが減少したときに、フッターがその上の要素に重ならないようにしています。container他の divが内部 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;
}