底部的页脚不使用浮动的div

Question

我有一个带导航的简单页面，两个高度为100％的液柱和一个页脚。页脚应该在底部但不是固定的，即如果它在折叠后面应该保持在那里直到我移动滚动条。

我在网上跟进了几个教程，最后得到了这个：http://jsfiddle.net/alexxonline/6ZRQT/1/如你所见，页脚位于页面中间而不是底部。

问题是因为列和容器的高度为100％并且div是浮动的，因此无法计算它们的实际高度。 我希望100％的列与页脚相反。但我迷路了，我不知道如何解决它。 提前谢谢。

这是我的css：

html, body {
            height:100%;
            padding:0;
        }

        #container {
            width:100%;
            height:100%;
            position:relative;
        }

        #footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            background-color: #FC0;
            height: 30px;
        }

        #left-column {
            background-color: #666;
            width :30%;
            float: left;
            height: 100%;
        }

        #right-column {
            background-color: #CCC;
            width: 70%;
            float: right;
            height: 100%;
        }

        #push
        {
            height: 30px;
        }
        #nav
        {
             height: 50px;   
        }