Question

jQuery的.width()方法似乎没有考虑滚动条。这对我来说是有问题的，因为我想将一些孩子的宽度设置为等于父母的宽度。我使用类似于以下的jQuery：

$('#contentDiv').width($('#containerDiv').width())

在此示例中，#contentDiv是我想要调整大小的元素，我想将其设置为宽度为#containerDiv，这是其父元素。我的问题是，这会切断#contentDiv的一面，如this fiddle.

中所示

在我的实际代码中，我有几个我正在使用jQuery调整的元素，它们都需要适合可滚动的div，因此只需将#contentDiv的css设置为100％就不是一个选项。在jQuery中处理div的滚动条宽度的最佳方法是什么？

Answer 1

我在解决此解决方案时找到的最佳解决方案是：

http://chris-spittles.co.uk/?p=531

jQuery功能强大，但有时只需要一小段原生JS就可以渲染像素完美的页面......我希望你会发现这个解决方案很有帮助！

Answer 2

更新：

没有jQuery宽度查找方法占滚动条。在我的原始示例中，使用.innerWidth(true) LOOKS就像它起作用，但仅仅因为它返回和对象，这导致width失败并且内部内容大小本身适合可用空间，因为示例不是＆＃39;非常好。但是，可以编写一个函数来计算div中的可用空间，其中包含一个滚动条，然后可以根据需要使用它来定位内容。

为了编写这个函数，我利用了这样一个事实：当div附加到带有滚动条的div时，它会占用整个可用宽度（即父级的内部宽度减去宽度滚动条）。

该功能如下所示：

function noScrollWidth(div){
    var measureDiv = $('<div id="measureDiv">');

    div.append(measureDiv);

    var width = measureDiv.outerWidth();

    measureDiv.remove();

    return width
};

然后我用它来调整我的内容div：

$('#contentDiv').width(noScrollWidth($('#containerDiv')));

Working fiddle.

Answer 3

试试这个：

$('#contentDiv').width($('#containerDiv')[0].clientWidth)

有关该解决方案的详细信息，请参阅this StackOverflow answer。

Answer 4

我尝试的另一种方法是设置两个元素＆＃39; box-sizing property到＆＃39; border-box＆＃39;，看看是否将contentDiv的宽度设置为100％然后以您想要的方式工作。

现在越来越少的项目担心狡猾的旧浏览器，＆＃39; border-box＆＃39;可以使事情更容易使用。但是，请务必在多个平台上测试多个浏览器，因为我不确定它们是否都以相同的方式处理滚动条。

处理滚动条和jquery .width（）方法

4 个答案: