处理滚动条和 jquery .width() 方法答案

【问题标题】：Dealing with scroll bars and jquery .width() method处理滚动条和 jquery .width() 方法
【发布时间】：2013-04-05 06:51:56
【问题描述】：

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

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

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

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

【问题讨论】：

这有一个问题，因为不同的浏览器实现滚动条的方式不同。 IE 将滚动条放在 div 区域之外（根据标准文档，这实际上是正确的），而所有其他浏览器实际上在该区域内都有滚动条。只是在研究这个领域时要记住的一点。
jquery - how to get screen width without scrollbar? 可能重复（使用innerWidth()）？
这是一个混乱的主题，因为它在所有浏览器中都不一致。有些会给你一个内部宽度，有些会给你滚动条的宽度。我认为您可能需要针对您计划支持的每个浏览器提出一个特定的解决方案
@FabrizioCalderan：不，这个问题是关于窗户的。这个问题是关于一个元素的。
@jeffrey-blake 和 ckersch：我建议您编辑标题以明确这个问题是关于元素，而不是浏览器宽度，以便像 FabrizioCalderan 这样的用户更清楚地区分它。

标签： javascript jquery css

【解决方案1】：

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

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

jQuery 功能强大，但有时只需少量原生 JS 即可呈现像素完美的页面...希望您会发现此解决方案对您有所帮助！

【讨论】：

【解决方案2】：

更新：

jQuery 的宽度查找方法都没有考虑滚动条。在我最初的示例中，使用.innerWidth(true) 看起来像它一样有效，但只是因为它返回和对象，这导致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')));

Working fiddle.

【讨论】：

将参数传递给innerWidth 设置元素的内部宽度。 true 不是一个有效的参数，但它仍然意味着它将返回元素，而不是宽度。
很好，当我使用innerWidth(true) 时，看起来我的示例实际上是默默地失败了。我添加了一个不同的解决方案。让我知道它是否适合您！
感谢您编辑它——我已经删除了我的反对票。我试图解决的问题是找到一个元素宽度，不包括滚动条，$(myElementSpec)[0].clientWidth 似乎是最好的解决方案。这个答案帮助我到达那里：stackoverflow.com/questions/21064101/…

【解决方案3】：

试试这个：

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

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

【讨论】：

【解决方案4】：

我尝试的另一种方法是将两个元素的 box-sizing property 都设置为 'border-box'，然后查看将 contentDiv 的宽度设置为 100% 是否符合您的要求。

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

【讨论】：