Html 100% 宽度网站中的包装 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1835565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wrapper DIV in 100% width website
提问by Keiron Lowe
Im creating a website where the header, footer, body are all 100% width of the page, but I need all the content to be centered of the page no matter the resolution. I've tried using a wrapper but then the header and stuff are only 100% width of the wrapper and not the page.
我创建了一个网站，其中页眉、页脚、正文都是页面的 100% 宽度，但无论分辨率如何，我都需要所有内容都以页面为中心。我试过使用包装器，但标题和内容只有包装器的 100% 宽度，而不是页面。
回答by Doug Neiner
I'm going out on a limb and guess that the background color/imagery is 100% wide, but you want the actual content to be centered (with a fixed width?). Here is sample code that uses an internal wrapper divon each item to keep internal content centered. I would recommend doing something totally different and possibly using repeating backgrounds on the htmland bodyelements, but I don't know what your page looks like.
我正在尝试猜测背景颜色/图像是 100% 宽，但您希望实际内容居中（具有固定宽度？）。这是示例代码，它div在每个项目上使用内部包装器来保持内部内容居中。我建议做一些完全不同的事情，可能在html和body元素上使用重复的背景，但我不知道你的页面是什么样的。
So.., the following will work, but will alarm HTML purists because of the extra markup :)
所以..，以下将起作用，但会因为额外的标记而警告 HTML 纯粹主义者:)
You can view a (super ugly) example of this method on this sample pageI put together.
您可以在我放在一起的示例页面上查看此方法的（超级丑陋）示例。
CSS:
CSS：
.wrapper {
width: 960px; /* fixed width */
margin: 0 auto; /* center */
}
HTML:
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>
回答by Robert Greiner
you can't do this with a div element unless it has a specified width.
除非它具有指定的宽度，否则您不能对 div 元素执行此操作。
for just text, you can use
对于文本，您可以使用
<div style="text-align: center;">text content</div>
回答by Upgradingdave
this should work for you:
这应该适合你：
The CSS:
CSS：
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
color:#564b47;
margin: 20px 140px 20px 140px;
text-align: center;
}
#content {
width: 100%;
padding: 0px;
text-align: left;
background-color: #fff;
overflow: auto;
}
The HTML:
HTML：
<body>
<div id="content">
<p><b>center</b><br /><br />
This BOX ist centered and adjusts itself to the browser window.<br />
The height ajusts itself to the content.<br />
</div>
</body>
This example was taken from this site, which I found a while ago and always refer to it for nice simple, clean css templates: http://www.mycelly.com/
这个例子取自这个网站，我不久前找到了它，并且总是引用它以获得漂亮的简单、干净的 css 模板：http: //www.mycelly.com/
回答by Matt
Have a play with this
玩这个
body {
text-align: center;
position: relative;
}
#content {
width: 100%;
height: auto;
position: relative;
margin-left: auto;
margin-right: auto;
}
Then in the HTML
然后在 HTML
<html>
<body>
<div id="header"></div>
<div id="content">
<!-- place all of your content inside of here -->
</div>
</body>
</html>
