可伸缩头像StackExchange [英] Stretchable header like StackExchange

问题描述

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

How can I do with CSS a site layout like webmaster.stackexchange.com that the site is center and the header and footer is as long as the user's window resolution, while the content is in the center check image fs you dont get me and THANK YOU :-) for your help.

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

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

推荐答案

<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 on #page 将顶部/底部边距设置为0，将左/右边距设置为自动，将其居中，因为它具有500px的固定宽度。请记住，您需要保持顶部边距等于#topBar的高度，以便#topBar不会覆盖#page

The margin: 0 auto on #page sets the top/bottom margin to 0 and the left/right margin to auto, centering it since it has a fixed width of 500px. Keep in mind you need to keep the top-margin equal to the height of the #topBar so that #topBar doesn't cover up any of #page

这篇关于可伸缩头像StackExchange的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！