Javascript 如何设置元素';s宽度等于窗';宽度是多少?

Javascript 如何设置元素';s宽度等于窗';宽度是多少?,javascript,jquery,css,html,Javascript,Jquery,Css,Html,使用: 不提供所需的结果,因为它不考虑垂直滚动条,因此元素溢出窗口,创建水平滚动条,如下图所示 您可以使用宽度:100% $(my_div).width(window.innerWidth) 或 您可能还需要确保您的主体或父div没有填充或边距: #my_div { width: 100%; } 你能用一下吗 body { padding: 0; margin: 0; } ?window.innerWidth在某些版本的Firefox中包括垂直滚动条的宽度: 然而,W

使用:

不提供所需的结果,因为它不考虑垂直滚动条,因此元素溢出窗口,创建水平滚动条,如下图所示


您可以使用
宽度:100%

 $(my_div).width(window.innerWidth)

您可能还需要确保您的主体或父div没有填充或边距:

#my_div {
  width: 100%;
}
你能用一下吗

body {
  padding: 0;
  margin: 0;
}

window.innerWidth在某些版本的Firefox中包括垂直滚动条的宽度:

然而,W3学校似乎不同意(它说它不包括滚动条的宽度):

Mozilla bug tracker中甚至有一个与此相关的bug:

上面的混淆已经用CSS3消除了一点,CSS3具有计算宽度的特定属性。如下设置框大小:

$(my_div).css('width', '100%');
以下哪项(引自w3schools):

此图元上指定的宽度和高度(以及最小/最大属性)决定了图元的边框框。也就是说,元素上指定的任何填充或边框都将在此指定的宽度和高度内进行布局和绘制。内容宽度和高度是通过从指定的“宽度”和“高度”属性中减去相应边的边框和填充宽度来计算的

如前所述,您可以使用width:100%,但请记住,这还包括您获得的任何额外间距和填充-但是,在支持CSS3的浏览器中,这是通过正确的框大小属性解决的,如上所述。所以,如果你有,说一个div,比如:

box-sizing: border-box

试验
内部div将根据说明此问题的CSS21规范越界

因此,请确保您没有任何填充来避免此类问题


如果您想使用jQuery获取窗口的宽度,可以使用jQuery的方法(或CSS(“宽度”))。

这在以前的情况下不起作用,所以出于某种原因,我完全忘记了考虑它。谢谢。虽然在另一篇帖子中也有类似的问题,但其中的信息可能会帮助您实现这一点/我打赌您没有考虑
my_div
上的填充、边框和边距,是吗?@Blazemonger实际上是我在实际代码中考虑的。)那么,你能告诉我们实际的代码吗?
$(my_div).css('width', '100%');
box-sizing: border-box
<div style="width:100%; padding: 20px;">
  <div style="width:100%; background:red">Test</div>
</div>