我们应该在 div#wrapper 还是 <body> 上设置宽度？答案

【问题标题】：Should we be setting width on div#wrapper or the <body>?我们应该在 div#wrapper 还是 <body> 上设置宽度？
【发布时间】：2012-10-24 06:10:00
【问题描述】：

很多人的 HTML 标记是这样的：

<html>
  <body>
    <div id="wrapper">
      <p>Stuff in here</p>
    </div>
  </body>
</html>

大多数时候，在此处的示例中或在网络上，人们建议您应该将宽度设置应用于#wrapper，而不是<body>。

这有什么根本原因吗？

例如，在一篇关于 techniques for gracefully degrading media queries 的文章中，为您提供有关技术 1：什么都不做的一些背景信息：

房间里的大象是桌面版的 Internet Explorer。使用移动优先的解决方案，大屏幕将显示内容在一列中，给用户带来痛苦的阅读体验，超过既定的舒适度最大值：50 到 75 个字符。 可能值得在主容器中设置一个 max-width 属性，然后在媒体查询中增加该 max-width。

还有他们的 CSS：

#wrapper {
 _width: 460px; /* Take that, IE6! */
 max-width: 460px;
}

@media only screen and (width) {

#wrapper {
  max-width: 1200px;
 } 
}

这里是how it'd come together for IE（媒体查询已被注释掉）。

在我们将其应用于<body> 而不是将其应用于#wrapper ——考虑到标准网站，会有什么不同吗？

任何潜在的错误？ I tried it here，好像没问题。如果布局变得更高级怎么办......

【问题讨论】：

现在没有真正的理由再拥有一个包装 div。

标签： html css media-queries semantic-markup

【解决方案1】：

嗯，我猜你想使用尽可能少的元素。但是，在许多情况下，#page-wrapper 和 body 是不可互换的。在许多情况下，您需要使用 body 作为背景颜色而不是 html 标签。在这些情况下（例如加权页脚），您需要 body 来拉伸 html，并且需要一个包装器来包含内容，也许可以将内容居中，并强制 body 拉伸并包含它。

所以 - 我想我会说，大多数人使用包装器是因为他们在第一堂课或在线教程中看到了它。我认为在大多数情况下，这是许多人的习惯。我会保持身体原样并将包装器边缘设置为 0 auto 并使用像你一样的最大宽度。它只是 EI 8 及之前的版本 - can I use media queries ? - 也许您应该检测 EI 8 并制作一个独特的样式表。我发现在为 mobil 定义了所有内容之后，我的媒体查询只是在那之后的几行迭代 -

【讨论】：

+1 表示“因为他们在第一堂课上看到了”。我知道这对我来说是一种习惯，因为客户总是倾向于以某种方式改变他们的想法，而且它更容易融入而不是之后再摆弄它，当然，我就是这样学会的！