让 div 贴在容器 div 的底部答案

【问题标题】：Make div stick to the bottom of container div让 div 贴在容器 div 的底部
【发布时间】：2010-02-02 22:15:45
【问题描述】：

我希望将 div (#menu) 的底边固定到其容器的底边 (#cont)。通常使用绝对定位很容易，但我希望#cont 拉伸到#menu 的大小。那你想知道它是粘在顶部还是底部有什么关系呢？

我使用 jQuery slideUp 效果在动画中垂直收缩#cont。发生这种情况时，我希望看到#menu 向上移动，而不是像毯子一样将容器的底部边缘拉到上面。但是，默认情况下溢出在底部被切断。

用于iceforge.net 的菜单。如果您还没有理解我的意思，请检查它们。

我已经解决了一些问题，尽管它有点丑陋。 #menu 仍然是一个正常定位的元素。在准备好文档时，我使用 Javascript 使其绝对定位。为了防止#cont 崩溃，我添加了一个高度为#menu 的空div。

在我链接的页面上可以看到。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您是否尝试过将容器 div 设为“位置：相对”？如果你这样做，那么你可以将菜单 div 绝对定位在容器的底部。

[edit] 啊，好的，我重新阅读了你的笔记，现在我想我理解得更好了。好吧，如果是我，我仍然会尝试在容器上使用“位置：相对”，尽管我有预感 IE 会让你感到悲伤。也许不是。另外我不确定“溢出：隐藏”是否会在菜单周围拉伸容器。

【讨论】：

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

【讨论】：