CSS 最小高度无法正常工作答案

【问题标题】：CSS min-height not working properlyCSS 最小高度无法正常工作
【发布时间】：2014-06-28 06:49:37
【问题描述】：

情况是这样的，我有这个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%（如果我有小内容）但如果有更长的内容会扩展。

任何帮助将不胜感激。

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

谢谢！

【问题讨论】：

不确定您要达到的目标。您希望最小高度是什么的 100%？
@CameronMartin，如果内容很小，基本上我希望#cont 的高度适合屏幕。如果内容更长，则会扩展
@YogeshSaroya 你不知道发生了什么，不是吗？这不是选择的语法或单词。这是我们正在努力解决您的问题。

标签： html css

【解决方案1】：

这可能有效：

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

【讨论】：

我试过了，但是如果#cont的内容比窗口长，内容会显示，但样式仍然是100%。（溢出没有样式。）
我无法重现该问题。在 Chrome 和 IE 中尝试过 (10 - 8)。
未来的读者 - 根据您的情况，您可能需要添加 html, body{height:100%}，如下所示，由 Cameron Martin 演示。

【解决方案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;
}

如果您希望页脚停留在底部：

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

【讨论】：

【解决方案3】：

您使用的是 min-height:100% ，这意味着“使这个盒子的最小高度成为它的高度”

最好使用像素值（例如，制作 #menu 和 #cont min-height:400px;）

如果你想让它们都达到最高的高度，那么你需要一些 jquery：

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

【讨论】：

不正确 - min-height:100% 意味着根据w3schools 将最小高度设为包含块的高度。
@GregBell MDN > w3schools