如何使选定的选择框超过父级div

Question

我创建了一个 jsFiddle，展示了 chosen-select 控件被其父元素 div '截断'。尽管在 y 轴上设置了 overflow 为 hidden，但当单击 chosen-select 控件时仍会显示滚动条。

这个父级 div 的 height 是固定的，并且设为 200px，需要保持不变。

如何使 chosen-select 在单击时超出父元素 div？ 编辑：jsFiddle，更新了更多的 CSS。 如果我 注释掉 div.content，它就不会破坏布局。 chosen-select 现在位于第四个标题的顶部。在这个 fiddle 中，我仍然可以选择 chosen-select 控件，但在我的应用程序中却不能。

是否需要对标题的位置做些调整？ 编辑2：jsFiddle。我刚注意到，当标题1/2向上滑动时，chosen-select 控件仍然停留在原地。值得一提的是，在我的应用中并没有发生这种情况。

发生的是，当您向上滑动第三个标题时，chosen-select 控件可见，直到完全向上滑动。与其他标题不同的是，它们的 input 会逐渐隐藏。

- Quoter

---

所以你想让 chosen-select 实际上可以在高度为200的 fixed div 外面级联？ - Nicholas Hazel

是的，实际高度更大，但这个 chosen-select 控件被放置在底部。jsFiddle 只是重新组装了我遇到的限制问题。 - Quoter

更新的答案...再次。 - Nicholas Hazel

Answer 1

只需添加此CSS类：

添加边框以显示您的其他框的定义保持不变。

div.content { position:absolute; }

在此查看：http://jsfiddle.net/SinisterSystems/e62Wu/3/

当你选择position:absolute时，你实际上是告诉它忽略你固定父div的约束，并能够超出框的限制。

这回答了您的问题吗？如果您愿意，我可以进一步说明。

编辑：

absolute positioning会将它从文档的其余部分流中删除，并将其视为不存在（它显示在你告诉它的位置，但不会修改其他元素的流）。

尝试添加一个空格，像这样：

CSS:

div.filler {
    height:30px;
}

HTML:

...
<div class="filler">
<div class="content">
     <select class="chosen-select">
     ...

FIDDLE：http://jsfiddle.net/e62Wu/7/

另外编辑：

请尝试如下：

JS Fiddle: http://jsfiddle.net/SinisterSystems/e62Wu/10/

添加 CSS：

.hider {
    position:static;
}

在HTML中添加ID：

<div id="dropper" class="heading">header 3 <span class="glyphicon glyphicon-chevron-up pull-right"></div>

添加 jQuery if/else：

    if($this.attr('id')==='dropper'){
       $('.content').toggleClass('hider').toggleClass('content');
    }

- Nicholas Hazel

---

你的方法在 jsFiddle 上似乎能够工作。然而，在我的应用程序中却无法运行。你是否知道有什么阻碍它正常运行的问题？我正在检查元素，但是在 CSS 块中并没有看到 div.content { position:absolute; } 的任何位置。 - Quoter

请展示您完整的CSS代码。 - Nicholas Hazel

你没有关闭填充 div。它是否意味着要包裹 content div？ - Quoter

哈哈，看我这个蠢货。没错，就是这个：JSFiddle。我们只是在创建一个块级元素，来伪造你的按钮高度。 - Nicholas Hazel

为您更新了。如果接受，请标记此答案，并继续在新帖子中提出更多问题。我们不想将其他人可能想使用的相关信息埋藏在无关的帖子深处 :-）。很乐意帮助。 - Nicholas Hazel

Answer 2

我添加了

border: 1px solid black;

返回到父级容器，并删除 "overflow: hidden"，下拉菜单将保持在 div 前面。

这并不是基于任何先前的知识，只是纯属运气。我试图弄清楚 div 的确切边界...哦，算了。

总是有些问题...

- TimSPQR

---

尝试了你删除 overflow:hidden 的方法，但并没有奏效。你还有其他可能忘记提到的更改吗？ - Quoter

这是可用的代码示例：http://jsfiddle.net/timspqr/e62Wu/4/。我还必须更改子框。 - TimSPQR