HTML5响应式Web设计：固定标头不起作用

Question

我正在尝试创建一个基本的HTML5响应式网页设计，其中标题是固定的。我试图保持我的HTML和CSS代码清洁并遵循最佳实践。标题的最大宽度为980像素，但蓝色标题背景会扩展以填充窗口（请参见图表）。

现在我的CSS（可能是我的HTML）存在一些问题，导致标题覆盖标题下方的内容。标题的蓝色背景也没有扩展以填充窗口的左侧。我也无法将徽标图像垂直居中在标题上。我错过了什么？我整晚都在玩这个，但我一直无法解决这些问题。

小提琴： http://jsfiddle.net/DU3D6/

CSS

    * { margin: 0; padding: 0; }

p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}

#wrapper {
    width: 100%;    
    max-width: 980px;
    margin: auto;
} 

header {
    background-color: blue;
    width: 100%;
    height: 100px;
    top: 0px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
}

#logo {
    height: 70px;
    width: 160px;
    float: left;
    display: block;
    background: url(logo.png) 0 0 no-repeat;
    text-indent: -9999px;
}

HTML

<div id="wrapper">
<header>
<a href="#" id="logo">Logo</a>
</header>
<section id="main">
<h1>Main section</h1>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>

我删除并重新发布了更新的代码。

Answer 1

您可以从标题中删除margin-left和margin-right。然后添加左零。 JSFiddle不显示图像，因为它是一个相对链接，但如果你想让它保持对齐但在980px居中的块内，那么在标题内嵌入另一个div，宽度为980并居中。

然后，为了使标题最初不覆盖内容，请添加大于标题的上边距，例如110px。

http://jsfiddle.net/A4atq/

* { margin: 0; padding: 0; }

p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}

#wrapper {
    width: 100%;    
    max-width: 980px;
    margin: auto;
} 

header {
    background-color: blue;
    width: 100%;
    height: 100px;
    top: 0px;
    left: 0;
    display: block;
    position: fixed;
}

#logo {
    height: 70px;
    width: 160px;
    float: left;
    display: block;
    background: url(logo.png) 0 0 no-repeat;
    /* text-indent: -9999px */;
}

section#main {
    margin-top: 110px;
}
}