Question

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

我相信我理解为什么会这样：我正在浮动容器并在其容器上使用溢出来清除浮动，这似乎是罪魁祸首。但是，浮动和清除对我的实际布局至关重要，所以我不能把它们拿出去容纳Chosen插件。

这是一个快速的JS小提琴来说明这个问题。我非常难过如何解决这个问题，所以提前感谢任何建议。

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;
}

弹出元素/ JQuery Chosen的溢出问题

2 个答案: