使溢出調整大小，以適應div

我遇到了一個有趣的問題。我有一個div這是一個菜單週圍的容器。使溢出調整大小，以適應div

如果我在菜單上設置了overflow : hidden，則溢出菜單的部分被隱藏。

我不想隱藏它們，而只是調整「組列表」菜單彈出框，以便它保留在我的菜單中。

這裏有一個小提琴：http://jsfiddle.net/uW9nG/

在小提琴，你會發現，如果你將鼠標懸停一個，它在藍色容器蠅了。如果你切換溢出，溢出將被隱藏。

如何才能使溢出只是調整組列表，以便它適合在容器？

（我一上午都在做這個數學，並不能完全得到它。）

來源

2012-10-30 Jeff

你groupList目前正在給予margin-top，但它會更簡單，使之position:absolute，然後拉起來-50px（以匹配你推<ul id='test-two'>下來50像素。See fiddle.

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

如果您的#test-two沒有定位，您可以給提供groupList 0px。

來源

2012-10-30 22:08:06 brentonstrine

我分叉的小提琴，用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 
    }) 
}

來源

2012-10-30 21:58:49 justspamjustin

使溢出調整大小，以適應div

回答

相關問題