Высота содержащего элемента div с переполнением-y: скрытый, не расширяемый с содержимым

Question

Итак, у меня есть 3 элемента div, содержащихся внутри содержащего элемента div, например:

<div id="contain">
    <div id="leftnav">
    ....
    </div>
    <div id="todo">
    ...
    </div>
    <div id="rightcontent">
    ....
    </div>
</div>

CSS выглядит следующим образом:

div {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}

#contain {
    width: 1000px;
    background: #ffffff;
    display: block;
    min-height: 500px;
    height: auto;
    max-height: 1500px;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    }

#leftnav, #todo {
    float: left;
    width: 20%;
    display: block;
    overflow: hidden;
    height: 100%;
    padding: 10px;
    position: absolute;
    left: -200px;
    bottom: 0;
    }
#rightcontent {
    float: right;
    width: 100%;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px;
    }

Теперь, причина того, что #leftnav и #todo расположены так, как они есть, заключается в том, что они анимируются вправо на основе их левого значения, если пользователь нажимает на ссылку, а правый контент просто показывает все время. Однако здесь возникает проблема.

Мне нужно, чтобы содержащий div увеличивался по высоте на основе содержимого в #rightcontent div до максимальной высоты. В его нынешнем виде он просто постоянно поддерживает высоту на уровне 500 пикселей независимо от того, что происходит, и реализует полосы прокрутки (чего я не хочу, чтобы это происходило). Возможно, я подхожу к этому неправильно и создаю переполнение: скрытый на нем по-прежнему сохраняет значение 500px, несмотря ни на что.

Я могу предоставить больше информации, если это необходимо. Заранее спасибо.

Answer 1

Похоже, у вас проблемы с поплавками.Когда вы перемещаете элементы, они выходят из нормального потока рендеринга.В качестве теста добавьте float:left к вашему #contain div.Вы должны увидеть, как он расширяется, чтобы содержать дочерние элементы div.

Я обычно стараюсь избегать использования float именно по этой причине.