[英]Make div stick to the bottom of container div
I'd like a div (#menu) to be fixed with its bottom edge to the bottom edge of its container (#cont). 我想将div(#menu)的底边固定到其容器(#cont)的底边。 Normally this is easy with absolute positioning, but I want #cont to stretch to the size of #menu.
通常,使用绝对定位很容易,但是我希望#cont扩展到#menu的大小。 Then why does it matter if it sticks to the top or bottom, you wonder?
那么,为什么要粘在顶部或底部却又有什么关系呢?
I use the jQuery slideUp effect which vertically shrinks #cont in an animation. 我使用jQuery slideUp效果在动画中垂直缩小#cont。 While this happens, I'd like to see #menu move up, instead of the bottom edge of the container just being pulled over it like a blanket.
发生这种情况时,我希望看到#menu向上移动,而不是像毯子一样将容器的底部边缘拉到上方。 However, by default overflow is cut off at the bottom.
但是,默认情况下,底部会阻止溢出。
It's for the menus on iceforge.net . 用于iceforge.net上的菜单。 Check them if you don't yet get what I mean.
如果您还没有明白我的意思,请检查一下。
I've worked something out, though it's a bit an ugly hack. 我已经解决了一些问题,尽管这有点丑陋。 #menu remains a normally positioned element.
#menu仍然是通常定位的元素。 On document ready I use Javascript to make it absolutely positioned.
准备好文档后,我使用Javascript对其进行了绝对定位。 To prevent #cont from collapsing, I add an empty div to it with the height of #menu.
为了防止#cont崩溃,我在其中添加了一个空的div,其高度为#menu。
It can be seen on the page I linked. 可以在我链接的页面上看到。
Have you tried making the container div "position: relative"? 您是否尝试过将容器div设置为“ position:relative”? If you do that, then you can absolutely-position the menu div at the bottom of the container.
如果这样做,则可以将菜单div绝对定位在容器的底部。
[edit] ah ok I re-read your note and now I think I understand it better. [编辑]嗯,好了,我重新阅读了您的笔记,现在我觉得我的理解更好了。 Well if it were me I'd still try using "position: relative" on the container, though I have a hunch that IE will cause you grief.
好吧,如果是我,我仍然会尝试在容器上使用“ position:relative”,尽管我有种预感,即IE会让您感到悲伤。 Maybe not though.
也许不是。 Also I'm not sure whether "overflow: hidden" will stretch the container around the menu.
另外,我不确定“ overflow:hidden”是否会在菜单周围拉伸容器。
This should work. 这应该工作。
#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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.