Question

如何使用CSS作为 webmaster.stackexchange.com 等网站布局，网站位于中心位置，页眉和页脚与用户的窗口分辨率一样长，而内容位于中心检查图片你没有得到我，谢谢你:-)为你的帮助。

http://imageshack.us/photo/my-images/600/strectch.jpg/

Answer 1

右键单击并查看来源 - 没有人禁止你这样做。

但简而言之 - 可能的方式之一（可能不是最好的方式） - 这将使内容集中：

<强> HTML

<body>
<div id="page-wrapper">
<div id="page-body">
    <div id="header" class="clearfix">
    ...

<强> CSS

#page-wrapper {width: 980px; margin: 0 auto; text-align: left;}
#page-body {position: absolute; width: 980px; top: 0;}

如果您想要在页脚和页面上添加背景图像，则可能需要使用稍微不同的方法。标题覆盖整个窗口宽度。

Answer 2

只需制作一个包含渐变的1x200（瘦和高）图像，然后使用此CSS：

#header-bg {
    background: blue url(/my/stretchy/image.png) repeat-x top left;
    text-align: center;
}

#header-content {
    width: 800px;
    margin: 0 auto;
    text-align: left;
}

<div id="header-bg">
    <div id="header-content">blah blah</div>
</div>

你基本上只需要水平平铺它。

Answer 3

<div id="topBar">My Epic Top Bar</div>
<div id="page">
       All your lovely page junk goes here
</div>
html, body 
{
    margin:0;
    padding:0;
}
#page 
{
 margin: 0 auto;
  width:500px;  
    margin-top:40px;
    background-color:blue;
}
#topBar {
 width:100%;
  height:40px;
   background-color:#ccc;
   position:absolute;
   top:0;
   left:0; 
}

margin: 0 auto上的#page将上/下边距设置为0，将左/右边距设置为自动，使其居中，因为它具有500px的固定宽度。请记住，您需要保持上边距等于#topBar的高度，以便#topBar不会覆盖任何#page

Answer 4

最常见的跨浏览器一致方式是：使用自动宽度包装器包装固定宽度的标题内容。

对于支持它的浏览器，您可以使用：before和：after来获得一个没有额外div的全宽标题：http://css-tricks.com/9443-full-browser-width-bars/

像StackExchange这样的可伸缩标头

4 个答案: