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

jQuery的

.width（）

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

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

在本例中，

#contentDiv

是我想要调整大小的元素，我想将其设置为其父元素

#containerDiv

的宽度。我的问题是，这切断了

#contentDiv

的一侧，如中所示

---

在我的实际代码中，我使用jQuery调整了几个元素的大小，这些元素都需要放入可滚动的div中，因此仅将

#contentDiv

的css设置为100%不是一个选项。在jQuery中处理div的滚动条宽度的最佳方法是什么？

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

jQuery功能强大，无所不能，但有时只需少量原生JS即可呈现像素级完美页面。。。我希望这个解决方案对您有所帮助

更新：

jQuery的宽度查找方法中没有一种方法可以解释滚动条。在我最初的示例中，使用

.innerWidth（true）

看起来很有效，但这只是因为它返回和object，这会导致

width

失败，并且内部内容的大小适合可用空间，因为示例不是很好。但是，可以编写一个函数来计算div中的可用空间，其中包含一个滚动条，然后可以使用滚动条根据需要定位内容

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

函数如下所示：

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

    div.append(measureDiv);

    var width = measureDiv.outerWidth();

    measureDiv.remove();

    return width
};

试试这个：

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

---

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

我尝试的另一种方法是将两个元素都设置为“边框框”，并查看是否将contentDiv的宽度设置为100%然后按您想要的方式工作

---

现在，越来越少的项目不再担心粗制滥造的旧浏览器，“边框框”可以让事情变得更容易处理。不过，一定要在多个平台上测试多个浏览器，因为我不确定它们都以相同的方式处理滚动条。

这有一个问题，因为不同的浏览器实现滚动条的方式不同。IE将滚动条放在div区域之外（根据标准文档，这实际上是正确的），而所有其他浏览器都将滚动条放在该区域之内。在研究此区域时要记住的一点。可能重复（使用

innerWidth（）

）？这是一个混乱的主题，因为它在所有浏览器中都不一致。有些会给你一个内部宽度，有些会给你滚动条的宽度。我认为您可能需要针对您计划使用的每个浏览器提出一个解决方案support@FabrizioCalderan：不，那是关于窗户的问题。这个问题是关于一个元素的。@jeffrey blake和ckersch：我建议您编辑标题以明确这个问题是关于元素的，而不是关于浏览器的宽度，以便像Fabriziocarderan这样的用户更清楚地了解它的区别。将参数传递给innerWidth将设置元素的内部宽度

true

不是有效的参数，但它仍然意味着它将返回元素，而不是宽度。很好的理解，当我使用

innerWidth（true）

时，我的示例似乎实际失败了。我添加了一个不同的解决方案。让我知道它是否适合你！谢谢你编辑它，我已经删除了我的反对票。我试图解决的问题是找到一个元素宽度，不包括滚动条和

$（myElementSpec）[0]。clientWidth

似乎是最好的解决方案。这个答案帮助我达到了目的：

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