CSS min-height无法正常工作

Here is the situation, I have this html:

这是情况,我有这个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 here:

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*/
}

What I want to do basically is #cont div must have a min height of 100% (if I have small content) but will extend if have longer content.

我想要做的基本上是#cont div必须具有100%的最小高度(如果我的内容很小)但如果内容较长则会延长。

Any help would be appreciated.

任何帮助,将不胜感激。

Note: The width size is just temporary for now.

注意:宽度大小暂时只是暂时的。

Thanks!

3 个解决方案

#1

This may work:

这可能有效:

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

#2

Try this http://jsfiddle.net/W6tvW/2/

试试这个http://jsfiddle.net/W6tvW/2/

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

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

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

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

#cont {
    margin-left : 300px;
    background-color: orange;
    min-height : 100%;
    position: absolute;
    right: 0;
}

If you want the footer to stay at the bottom:

如果你想让页脚留在底部:

#footer {
    position: absolute;
    bottom: 0;
}

#3

-2

you are using min-height:100% which means 'make the minimum height of this box be the height of it'

你正在使用最小高度:100%这意味着'使这个盒子的最小高度成为它的高度'

you would be better using a pixel value (e.g., make #menu and #cont min-height:400px;)

你会更好地使用像素值(例如,make #menu和#cont min-height:400px;)

if you want to make them both the height of the tallest one, then you'll need some jquery:

如果你想让它们成为最高的那个,那么你需要一些jquery:

if (jQuery('#menu').height() < jQuery('#cont').height()) {
    // the cont is bigger than the menu
    jQuery('#menu').css("height", jQuery('#cont').height());
}

#1