Question

我想将div（#menu）的底边固定到容器的底边（#cont）。通常这对于绝对定位来说很容易，但我希望#cont能够扩展到#menu的大小。那么，为什么它粘在顶部或底部是否重要，你想知道吗？

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

这是iceforge.net上的菜单。如果你还没有明白我的意思，请检查它们。

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

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

Answer 1

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

[编辑]啊好的我重读了你的笔记，现在我想我更了解它。好吧如果是我，我仍然会尝试在容器上使用“position：relative”，尽管我有预感IE会让你感到悲伤。也许不是。此外，我不确定“溢出：隐藏”是否会将容器拉伸到菜单周围。

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>

使div粘贴到容器div的底部

2 个答案: