javascript - 如何设置元素的宽度等于窗口的宽度？

Question

使用：

 $(my_div).width(window.innerWidth)

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

score 7 · Accepted Answer

7

你可以使用width:100%

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

于 2013-06-07T14:49:04.877 回答

score 3 · Accepted Answer

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

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

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

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

box-sizing: border-box

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

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

如上所述，您可以使用 width:100%，但请记住，这还将包括您获得的任何额外间距和填充 - 但是，在启用 CSS3 的浏览器中，这可以通过正确的 box-sizing 属性解决，如上所述。所以，如果你有，说一个像这样的 div：

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

根据 CSS21 规范，内部 div 将越界。这是一个说明这个问题的 jsFiddle 。

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

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

score 0 · Accepted Answer

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

或者

#my_div {
  width: 100%;
}

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

body {
  padding: 0;
  margin: 0;
}

score 0 · Accepted Answer

0

你能用吗

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

?

于 2013-06-07T14:52:55.423 回答

4 回答 4