HTML5 响应式网页设计：固定标题不起作用

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 并居中。

然后为了让 header 最初不覆盖内容，添加一个比 header 更大的上边距，比如 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;
}
}