html – CSS最小高度不能正常工作

这可能是一个简单的问题,但我不知道我的CSS是什么问题.我有研究,但我只是不能在这种情况下工作.请不要把我钉十字架

这是情况,我有这个html：

<div id='main'>
    <div id='menu'>
        Menu Items Here
    </div>
    <div id='cont'>
        Content Here
        <div id='footer'>Some Footer</div>
    </div>
</div>

CSS这里：

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

#main{
    overflow : auto;
    background-color: yellow;
    width : 100%;
    min-height : 100%;
}

#menu {
    background-color: red;
    float : left;
    width : 300px;
}

#cont {
    margin-left : 300px;
    float : right;
    background-color: orange;
    width : 100px;
    min-height : 100%;
    height: auto !important; /*min-height hack*/
    height: 100%;            /*min-height hack*/
}

我想做的基本上是#cont div必须有一个最小高度100％(如果我有小的内容),但如果有更长的内容会延长.

任何帮助将不胜感激.

注意：宽度尺寸现在只是暂时的.

谢谢！

#main{
    height : 100%;
}
#cont {
    min-height : 100%;
    /* Without the hacks */
}