將div粘貼到容器底部

Question

我想將一個div（#menu）的底邊固定到其容器的底部邊緣（#cont）。通常這對於絕對定位來說很容易，但是我希望#cont能夠擴展到#menu的大小。那麼，爲什麼它堅持頂部或底部，你想知道嗎？

我使用jQuery slideUp效果，它在動畫中垂直縮小#cont。發生這種情況時，我希望看到#menu向上移動，而不是將容器的底部邊緣像毯子一樣拉過來。但是，默認情況下，溢出在底部被切斷。

這是iceforge.net的菜單。如果你還沒有明白我的意思，請檢查它們。

---

我工作過一些東西，雖然這有點醜陋。 #menu仍然是一個正常位置的元素。在準備好文檔之後，我使用Javascript來使其絕對定位。爲了防止#cont崩潰，我使用#menu的高度添加了一個空的div。

它可以在我鏈接的頁面上看到。

Answer 1

這應該工作。

#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> 

Answer 2

您是否嘗試過使容器div「位置：相對」？如果你這樣做，那麼你可以將菜單div絕對定位在容器的底部。

[編輯]啊OK我重讀你的注意，現在我覺得我更好地理解它。那麼如果是我，我仍然會嘗試在容器上使用「position：relative」，儘管我有一種預感，IE會讓你感到悲傷。也許不是。此外，我不確定是否「溢出：隱藏」將在菜單週圍拉伸容器。