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

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

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

在这个例子中，是#contentDiv我想尺寸的元件，我想将其设置为具有#containerDiv宽度，这是它的父元素。我的问题是，这切断的#contentDiv一侧，如this fiddle.

在我实际的代码所示，我有我的jQuery上浆几个要素，这都需要以适合滚动DIV，所以只设置#contentDiv到100％的css不是一个选项。在jQuery中处理div的滚动条宽度的最佳方式是什么？

来源

2013-04-12 ckersch

存在一个问题，因为不同的浏览器以不同的方式实现滚动条。IE将滚动条放在div区域之外（根据标准文档，它实际上是正确的），而所有其他浏览器实际上都在该区域内部具有滚动条。在研究这个领域时要记住一些事情。 – krillgar

可能重复[jQuery的 - 如何获得屏幕宽度没有滚动？]（http://stackoverflow.com/questions/8339377/jquery-how-to-get-screen-width-without-scrollbar）（使用'innerWidth（）'）？ – fcalderan

这是一个混乱的主题，因为它在所有浏览器中都不一致。有些会给你一个内部宽度，有些会给你滚动条的宽度。我认为您可能需要提出针对您计划支持的每个浏览器的解决方案 –

我发现解决此解决方案的工作，而最好的解决办法是这样的：

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

jQuery是全能的，一切，但有时原生JS的小破折号是所有你需要渲染像素完美的网页。 ..我希望你会发现这个解决方案很有帮助！

来源

2013-04-12 16:39:51 banjoSas

更新：

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

然后我用这个大小我的内容股利：

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

Working fiddle.

来源

2013-04-12 16:42:43 ckersch

将参数传递给innerWidth *设置元素的内部宽度。 'true'不是一个有效的参数，但它仍然意味着它将返回元素，而不是宽度。 –

不错，当我使用'innerWidth（true）'时，它看起来像我的例子实际上是在默默地失败。我已经添加了一个不同的解决方案。请让我知道这对你有没有用！ – ckersch

感谢您的编辑 - 我删除了我的downvote。我试图解决的问题是找到一个元素宽度，排除滚动条，'$（myElementSpec）[0] .clientWidth'似乎是最好的解决方案。这个答案帮助我到达：http://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively –

试试这个：

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

对于铁道部有关该解决方案的信息，请参阅this StackOverflow answer。

来源

2014-10-25 00:16:01

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

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

来源

2014-10-25 00:18:06

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

回答

相关问题