可伸缩标头，如StackExchange

如何解决可伸缩标头，如StackExchange

| 我该如何使用CSS做一个网站布局，例如webmaster.stackexchange.com，该网站以网站为中心，页眉和页脚与用户的窗口分辨率一样长，而内容位于中心就可以查看图像fs我，谢谢你:-)的帮助。 http://imageshack.us/photo/my-images/600/strectch.jpg/

解决方法

右键单击并查看源-没有人禁止您这样做。简而言之-一种可能的方式（可能不是最好的）-这将使内容居中：的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;}

如果要在页脚和页眉上包含背景图像以覆盖整个窗口宽度，则可能需要使用一些不同的方法。 , 只需制作一个包含渐变的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>

您基本上只需将其水平平铺即可。 ,

<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，将左侧/右侧边距设置为auto，将其居中，因为它的固定宽度为500px。请记住，您需要使上边距等于#topBar的高度，以使#topBar不会掩盖#page的任何内容 , 跨浏览器的最一致的方式如前所述：使用自动宽度包装器包装固定宽度的标头内容。对于支持它的浏览器，您可以使用：before和：after来获得全角标头，而无需额外的div：http://css-tricks.com/9443-full-browser-width-bars/

可伸缩标头，如StackExchange

如何解决可伸缩标头，如StackExchange

解决方法

相关推荐