Question

使用：

 $(my_div).width(window.innerWidth)

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

Answer 1

您可以使用width:100%

<div style="width:100%;height:1500px;background:red"></div>

Answer 2

window.innerWidth包含某些版本的Firefox中垂直滚动条的宽度：

然而，w3schools似乎不同意（它说它不包括滚动条的宽度）：

Mozilla bug追踪器中甚至存在一个与此相关的错误：

上面的混淆已经被CSS3清除了一点，CSS3有一个特定的属性来计算宽度box-sizing。像这样设置盒子大小：

box-sizing: border-box

以下内容（引自w3schools）：

此元素上指定的宽度和高度（以及最小/最大属性）确定元素的边框。也就是说，元素上指定的任何填充或边框都布局并在此指定的宽度和高度内绘制。通过从指定的“宽度”和“高度”属性中减去相应边的边框和填充宽度来计算内容宽度和高度

你可以使用宽度：100％如上所述，但请记住，这还包括你得到的任何额外间距和填充 - 但是，在支持CSS3的浏览器中，这可以通过正确的box-sizing属性解决，如如上所述。所以，如果你有，比如说一个div：

<div style="width:100%; padding: 20px;">
  <div style="width:100%; background:red">Test</div>
</div>

根据CSS21规范，内部div会越界。 Here's a jsFiddle说明了这个问题。

因此，请确保您没有任何填充以避免此类问题。

如果你想使用jQuery来获取窗口的宽度，可以使用jQuery的width()方法（或css（“width”））。

Answer 3

$(my_div).css("width", "100%");

或

#my_div {
  width: 100%;
}

你也可能想要确保你的身体或父div没有填充或边距：

body {
  padding: 0;
  margin: 0;
}

Answer 4

你能用

吗？

$(my_div).css('width', '100%');