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

这正是我想要的 - 垂直滚动条（没有水平滚动条），上限高度和内容相关宽度。除了一个例外 - 它不考虑垂直滚动条的宽度。因此，当行/复选框很少且不需要垂直滚动条时 - 的宽度div是最宽复选框的宽度。但是当滚动条出现时，其宽度div不变： 在此处输入图像描述

label分为 2 行。我用以下方法解决了这个问题span：

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

和：

span
{
    white-space:nowrap;
}

但div' 的宽度仍然不正确：

在此处输入图像描述

有什么方法可以div仅使用 html/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

之后，您可以div使用一些 javascript 扩展您的大小...这可能对您有用：

$('#combobox').css("width",$('#combobox').width+13);//这只是一个使用 13px 的示例，但您需要在所有浏览器中对其进行测试以了解它是如何工作的

于 2013-05-04T10:29:19.367 回答