6

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

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

在此示例中，#contentDiv是我想要调整大小的元素，并且我想将其设置为具有 的宽度#containerDiv，这是它的父元素。我的问题是，这会切断 的一侧#contentDiv，正如在这个小提琴中看到的那样。

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

4

4 回答 4

1

我在解决此解决方案时发现的最佳解决方案是：

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

jQuery 功能强大，但有时只需要少量的原生 JS 即可渲染像素完美的页面……我希望这个解决方案对您有所帮助！

于 2013-04-12T16:39:51.503 回答
0

尝试这个：

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

有关该解决方案的更多信息，请参阅此 StackOverflow 答案。

于 2014-10-25T00:16:01.080 回答
0

我尝试的另一种方法是将两个元素的box-sizing属性都设置为'border-box'，并查看是否将 contentDiv 的宽度设置为 100%，然后按你想要的方式工作。

现在越来越少的项目担心旧的浏览器很糟糕，'border-box' 可以让事情变得更容易使用。不过，请务必在多个平台上测试多个浏览器，因为我不确定它们都以相同的方式处理滚动条。

于 2014-10-25T00:18:06.593 回答
0

更新：

jQuery 宽度查找方法都没有考虑滚动条。在我最初的示例中，使用.innerWidth(true)LOOKS 就像它一样有效，但只是因为它返回和对象，这会导致width失败并且内部内容自身大小以适合可用空间，因为示例不是很好。但是，可以编写一个函数来计算带有滚动条的 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')));

工作小提琴。

于 2013-04-12T16:42:43.710 回答