如何设置元素的宽度等于窗口的宽度？答案

【问题标题】：How to set an element's width equal to window's width?如何设置元素的宽度等于窗口的宽度？
【发布时间】：2013-06-03 22:16:47
【问题描述】：

使用：

 $(my_div).width(window.innerWidth)

没有提供想要的结果，因为没有考虑到垂直滚动条，所以元素溢出了窗口，创建了一个水平滚动条，如下图。

【问题讨论】：

【解决方案1】：

你可以使用width:100%

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

【讨论】：

【解决方案2】：

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

或

#my_div {
  width: 100%;
}

您可能还想确保您的 body 或父 div 没有填充或边距：

body {
  padding: 0;
  margin: 0;
}

【讨论】：

【解决方案3】：

你能用吗

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

【讨论】：

【解决方案4】：

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

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

在 Mozilla 错误跟踪器中甚至有一个与此相关的错误：

上面的困惑已经用 CSS3 消除了一点，它有一个特定的属性来计算宽度，box-sizing。像这样设置 box-sizing：

box-sizing: border-box

执行以下操作（引自 w3schools）：

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

您可以按照说明使用 width: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")）。

【讨论】：