Сделать div приклеить к нижней части контейнера div

Question

Я бы хотел, чтобы div (#menu) был зафиксирован его нижним краем к нижнему краю его контейнера (#cont). Обычно это легко с абсолютным позиционированием, но я хочу, чтобы #cont растянулся до размера #menu. Тогда почему это важно, если оно прилипает к верху или низу?

Я использую эффект jQuery slideUp, который вертикально уменьшает #cont в анимации. В то время как это происходит, я хотел бы видеть, как #menu перемещается вверх, вместо того, чтобы нижний край контейнера просто натягивался на него как одеяло. Однако по умолчанию переполнение отключено внизу.

Это для меню iceforge.net . Проверьте их, если вы еще не поняли, о чем я.

---

Я кое-что решил, хотя это немного уродливый хак. #menu остается нормально расположенным элементом. В готовом документе я использую Javascript, чтобы сделать его абсолютно позиционированным. Чтобы предотвратить падение #cont, я добавляю пустой div с высотой меню #.

Это можно увидеть на странице, на которую я ссылаюсь.

Answer 1

Вы пытались сделать контейнер div "position: относительный"? Если вы это сделаете, то можете абсолютно точно расположить div меню внизу контейнера.

[править] ах, ладно, я перечитал вашу заметку, и теперь я думаю, что понимаю ее лучше. Ну, если бы это был я, я бы все же попытался использовать «position: родственник» на контейнере, хотя у меня есть догадка, что IE вызовет у вас горе Может быть, не так. Также я не уверен, будет ли «overflow: hidden» растягивать контейнер вокруг меню.

Answer 2

Это должно работать.

#cont {
    width: 200px;
    border: 2px solid blue;
    position: relative;
    clip: auto; overflow: hidden;
}
#menu {
    width: 200px;
    background: orange;
    position: relative; 
}

$('#menu').click(function() {
    var theHeight = $(this).height();
    $(this).animate({top:-theHeight}, 500).parent().animate({height: 0}, 500);
});

<div id="cont">
        <div id="menu">
            the menu div
            <br />content
            <br />content
            <br />content
            <br />content
            <br />content
            <br />content
            <br />content
            <br />content
        </div>
 </div>