내부 div에 맞게 오버플로 크기 조정

Question

흥미로운 문제가 발생했습니다. 메뉴 주위의 컨테이너 인 div이 있습니다.

메뉴에 overflow : hidden을 설정하면 오버플로되는 메뉴 부분이 숨겨집니다.

숨기기 대신 '그룹 목록'메뉴 플라이 아웃의 크기를 조정하여 내 메뉴 안에 머물러있게 할 수 있습니다.

가 여기에 바이올린입니다 : http://jsfiddle.net/uW9nG/

바이올린에, 당신은 당신이 를 마우스 오버하면, 그것은 파란색 컨테이너에 걸쳐 flys에서 것을 볼 수 있습니다. 오버플로를 전환하면 오버플로가 숨겨집니다.

오버플로를 만들면 컨테이너에 맞도록 그룹 목록의 크기를 간단하게 조정할 수 있습니까?

는 (나는 모든 아침이 수학에서 일한지, 아주 그것을 얻을 수 없습니다 ..)

Answer 1

는 귀하의 groupList는 현재 margin-top를 제공하고 있습니다,하지만 그것을 position:absolute을 한 다음 아래로 <ul id='test-two'>를 밀어 50 픽셀에 맞게 (-50px 그것을 뽑아 간단하게 될 것입니다. See fiddle.

groupList.css({ 
    'top': '-50px', 
    'position': 'absolute' 
}); 

#test-two을 배치하지 않은 경우 top에 groupList 0px를 제공 할 수 있습니다.

Answer 2

나는 당신의 바이올린 포크와 solution 함께했다. 컨테이너와 플라이 아웃의 상단 위치를 찾은 다음 차이점을 찾고 해당 값으로 플라이 아웃을 상대적으로 배치하십시오. 또한 20px로 하드 코딩 된 목록 항목의 높이를 변경해야합니다. 그렇지 않으면 목록 항목의 너비가 변경됩니다.

var groupListTop = groupList.offset().top; 
var containerTop = $('#container').offset().top; 
if(groupListTop < containerTop) { 
    var diff = containerTop - groupListTop; 
    groupList.css({ 
     position: 'relative', 
     top: diff 
    }) 
}