html - 标题栏上的宽度问题

Question

我正在尝试制作一个延伸到我的网页(如 Facebook)顶部的“栏”。然后我在右边有一些导航链接。但是，如果您调整页面大小，然后使用水平滚动条，红色背景就会丢失。

http://jsfiddle.net/ejJnL/embedded/result/

http://jsfiddle.net/ejJnL/

<div class="header-container">
    <div class="header">
        <ul class="main-navigation">
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">D</a></li>
            <li><a href="#">E</a></li>
        </ul>
        <div class="clear"></div>
    </div>
</div>

CSS:

.header-container {
    background-color: red;
    height: 40px;
    width: 100%;
}

.header {
    height: 100%;
    line-height: 40px;
    margin: 0 auto;
    width: 960px;
}

.header img {
    vertical-align: middle;
}

.main-navigation {
    float: right;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation li {
    float: left;
}

.main-navigation a {
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}

Answer 1

.header-container {
    background-color: red;
    height: 40px;
    position: fixed:
    left: 0;
    right: 0;
}

1. 固定位置并声明它附加到视口(viewport)的左右边缘，如上所示。

2. 您不需要 width: 100% 或 height: 100% 的声明，因为 div 已经是 block 元素并将填充它们的容器。

3. 如果您希望栏延伸到页面边缘，您应该声明 body { margin:0}。

4. 您可能应该为您的 .header 使用 max-width 而不是 width，这样菜单仍会显示在一个小窗口中。

5. 您可能还想将 overflow: none 添加到 .header-container