0 
<div id="combobox">
    <label><input type="checkbox" id="tag3"
        name="checkbox" onclick="toggleTag('tag3')"/>DialogProc</label><br/>
    <label><input type="checkbox" id="tag2"
        name="checkbox" onclick="toggleTag('tag2')"/>fds</label><br/>
</div>

divラベル付きのチェックボックスのコンテナとして使用しています。対応するcss:

div#combobox
{
    max-height: 150px;
    overflow: auto;
    border: 1px solid #000000;
}

そして、これはまさに私が望むことです-垂直スクロールバー（水平スクロールバーなし）、上限付きの高さ、およびコンテンツに依存する幅。1 つの例外を除いて、垂直スクロールバーの幅は考慮されません。したがって、行/チェックボックスが少なく、垂直スクロールバーが必要ない場合、div幅は最も広いチェックボックスの幅になります。ただし、スクロールバーが表示されると、の幅divは変更されません。 ここに画像の説明を入力

はlabel2 行に分かれています。私はこれを修正しましたspan：

<span><label><input type="checkbox" id="tag4"
    name="checkbox" onclick="toggleTag('tag4')"/>InitializeWindow</label></span><br/>

と：

span
{
    white-space:nowrap;
}

しかし、divの幅はまだ正しくありません:

ここに画像の説明を入力

divhtml/cssだけでスクロールバーの幅を考慮に入れる方法はありますか? そうでない場合、javascript でそれを行う最善の方法は何ですか?

4

1 に答える 1

1

次のようなものを使用することをお勧めします。

(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);

したがって、スクロールがアクティブになっているかどうかを確認できます。

$('#combobox').hasScrollBar(); // returns true if there's a `vertical` scrollbar

その後、divJavaScriptを使用してサイズを拡張できます...これはおそらくうまくいくでしょう：

$('#combobox').css("width",$('#combobox').width+13);//これは 13px を使用する単なる例ですが、すべてのブラウザでテストして、すべてがどのように機能するかを確認する必要があります

于 2013-05-04T10:29:19.367 に答える