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. Fix the position and declare it attached to the left and right edges of the viewport as shown above.

2. You don't need declarations of width: 100% or height: 100% as div are already block elements and will fill their containers.

3. You should declare body { margin:0} if you want the bar to extend to the page edges.

4. You should probably use max-width not width for your .header so the menu still shows in a small window.

5. You may also want to add an overflow: none to the .header-container

Answer 2

http://jsfiddle.net/SbpZG/

.header-container上和position: relative上的固定宽度.main-navigation