StackExchange 等可伸缩标头答案

【问题标题】：Stretchable header like StackExchangeStackExchange 等可伸缩标头
【发布时间】：2011-06-26 03:35:50
【问题描述】：

我怎样才能用 CSS 做一个像 webmaster.stackexchange.com 这样的网站布局，网站居中，页眉和页脚与用户的窗口分辨率一样长，而内容在中心检查图像 fs 你没有得到我，谢谢 :-) 你的帮助。

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

【问题讨论】：

标签： html css layout header

【解决方案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;}

如果您想在页脚和页眉上使用背景图像以覆盖整个窗口宽度，您可能需要使用一些不同的方法。

【讨论】：

这应该是我的台词，“右键单击并查看源代码——没有人禁止你这样做。” :-)

【解决方案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>

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

【讨论】：

我猜这行得通，但对我来说，将页面内容包装在标题中似乎不太语义。

【解决方案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; 
}

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

【讨论】：

【解决方案4】：

如前所述，跨浏览器最一致的方式是：使用自动宽度包装器包装固定宽度的标题内容。

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

【讨论】：