css - 弹出元素/JQuery 选择的溢出问题

Question

我在表单上使用了 JQuery Chosen 插件。When the choices drop down, it creates a vertical scrollbar.

我相信我明白为什么会这样：我正在浮动容器并在其容器上使用溢出来清除浮动，这似乎是罪魁祸首。但是，浮动和清除对我的实际布局至关重要，因此我不能仅仅将它们取出以适应 Chosen 插件。

这是一个快速的 JS Fiddle 来说明这个问题。我很困惑如何解决这个问题，所以提前感谢您的任何建议。

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

通过将我清除浮动的方法从使用溢出更改为在容器上使用 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;
}