包装DIV在100％宽度的网站

问题描述：

我创建一个网站，页眉，页脚，主体都是100％的页面宽度，但我需要所有的内容以页面为中心而不管分辨率。我试过使用包装，但然后头和东西只有100％宽度的包装，而不是页面。包装DIV在100％宽度的网站

答

我要去并且猜测背景颜色/图像是100％宽，但是你想要实际的内容居中（具有固定的宽度？）。下面是示例代码，它使用内部包装div对每个项目保持内部中心。我会推荐做一些完全不同的事情，并可能在html和body元素上使用重复背景，但我不知道你的页面是什么样的。

所以..，下面的工作，但会因为额外的标记报警HTML较真:)

您可以查看此方法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>

答

你不能用div元素做这个，除非它具有指定的宽度。

只是文本，你可以使用

<div style="text-align: center;">text content</div>

答

这应该为你工作：

的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; 
}

的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>

这个例子从这个网站被采取了，我fou ND前一阵子，总是指它漂亮简洁，干净的CSS模板： http://www.mycelly.com/

答

有这个

body { 
    text-align: center; 
    position: relative; 
} 

#content { 
    width: 100%; 
    height: auto; 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
}

戏然后在HTML

<html> 
<body> 
<div id="header"></div> 
<div id="content"> 
    <!-- place all of your content inside of here --> 
</div> 
</body> 
</html>

@马特的'保证金left'和'保证金right'什么也不做有意义的，因为宽度是'100％' 。 – 2009-12-02 20:46:00

包装DIV在100％宽度的网站

相关推荐