0

フォームで JQuery Chosen プラグインを使用しています。選択肢がドロップダウンすると、垂直スクロールバーが作成されます。

これがなぜなのか理解していると思います。コンテナをフローティングさせ、そのコンテナでオーバーフローを使用してそのフロートをクリアしており、それが原因のようです。ただし、フロートとクリアは私の実際のレイアウトにとって最も重要であるため、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>
4

2 に答える 2

0

フロートをクリアするアプローチをオーバーフローの使用からコンテナーでの 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;
}
于 2013-09-19T13:30:59.597 に答える
0

div 要素の高さを十分大きく設定する必要があります。そのためには、その div 要素のすべての親の高さを設定する必要があります。

于 2013-09-19T12:34:10.723 に答える