컨테이너 div의 하단에 div 스틱 만들기

Question

div (#menu)의 하단 가장자리를 해당 컨테이너의 하단 가장자리 (#cont)에 고정하고 싶습니다. 일반적으로 절대 위치 지정은 쉽지만 #content를 #menu의 크기만큼 늘리 길 원합니다. 그렇다면 그것이 맨 위나 맨 아래에 달라 붙으면 왜 중요할까요?

애니메이션에서 #cont를 세로로 줄이는 jQuery 슬라이드 업 효과를 사용합니다. 이런 일이 발생하는 동안 컨테이너의 아래쪽 모서리 대신 담요처럼 넘겨주는 #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를 "position : relative"로 만들려고 했습니까? 그렇게하면 컨테이너의 맨 아래에 메뉴 div를 절대적으로 배치 할 수 있습니다.

[편집] 아아아, 다시 메모를 읽었으니 이제는 더 잘 이해한다고 생각합니다. 그것은 나 였다면 컨테이너에 "position : relative"를 사용하려고 시도 할 것입니다. IE가 당신에게 슬픔을 느끼게 할 직감이 있습니다. 어쩌면 아닙니다. 또한 "오버 플로우 : 숨김"이 메뉴 주변의 컨테이너를 늘릴 지 여부는 확실하지 않습니다.