css - 100% 宽度网站中的包装 DIV

Question

我正在创建一个网站，其中页眉、页脚、正文都是页面的 100% 宽度，但无论分辨率如何，我都需要将所有内容置于页面中央。我试过使用包装器，但标题和内容只是包装器的 100% 宽度，而不是页面的宽度。

Answer 1

我有点冒险，猜测背景颜色/图像是 100% 宽，但您希望实际内容居中(宽度固定？)。下面是示例代码，它在每个元素上使用内部包装器 div 以保持内部内容居中。我会建议做一些完全不同的事情，并可能在 html 和 body 元素上使用重复背景，但我不知道您的页面是什么样的。

所以..，下面的将工作，但会警告 HTML 纯粹主义者，因为额外的标记:)

您可以查看此方法的一个( super 难看的)示例 on this sample page我放在一起。

CSS:

.wrapper {
   width: 960px; /* fixed width */
   margin: 0 auto; /* center */
}

HTML:

<div id="header">
   <div class="wrapper">
   <h1>My Title</h1>
   </div>
</div>
<div id="content">
   <div class="wrapper">
   <h2>Sub Title</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
      do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
      nisi ut aliquip ex ea commodo consequat.</p>
   </div>
</div>
<div id="footer">
   <div class="wrapper">
   <p class="credits">Copyright 2009 by Your Company.com, LLC</p>
   </div>
</div>