选择弹出元素/JQuery时出现溢出问题

Question

我在表单上使用了JQuery Chosen插件。当选择下拉时，它会创建一个垂直滚动条。

我相信我理解这是为什么:我浮动容器，并使用其容器上的溢出来清除该浮动，这似乎是罪魁祸首。然而，浮动和清除对于我的实际布局来说是最重要的，所以我不能仅仅为了适应所选的插件而把它们拿出来。

这里有一个快速的JS菲德尔来说明这个问题。我对如何解决这个问题相当困惑，所以提前感谢您的任何建议。

http://jsfiddle.net/NmVXV/

CSS：

.container {
    background: #ccc;
    width: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}
.main {
    float: left;
    width: 100%;
}
.select-chosen {
    display: block;
    width: 100%;
}

HTML：

<div class="container">
    <div class="main">
        <br />
        <div>
            <select class="select-chosen" multiple>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
            </select>
        </div>
        <br />
        <br />
    </div>
</div>

Answer 1

您应该将div元素的高度设置为足够大。为此，您必须设置该div元素的所有父元素的高度。

Answer 2

通过将我清除浮动的方法从使用overflow更改为在容器上使用clearfix，从而实现了这一点：

http://jsfiddle.net/NmVXV/3/

.container {
    background: #ccc;
    width: 400px;
}
.main {
    float: left;
    width: 100%;
}
.select-chosen {
    display: block;
    width: 100%;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content:" ";
    clear: both;
    height: 0;
}