Мини-высота 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% (если у меня есть небольшой контент), но будет расширяться, если у вас есть более длинный контент.

Любая помощь будет оценена.

Примечание. Размер ширины временно только временно.

Спасибо!

Ответы

Ответ 1

Это может работать:

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

Ответ 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%, что означает "сделать минимальную высоту этого окна равной высоте"

вам лучше использовать значение пикселя (например, make #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());
}