Question

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

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

<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;
}

修复位置并将其声明附加到视口的左右边缘，如上所示。
您不需要宽度声明：100％或高度：100％因为div已经是块元素并将填充其容器。
如果您希望栏延伸到页面边缘，则应声明body { margin:0}。
您应该使用max-width而不是width来.header，因此菜单仍会显示在一个小窗口中。
您可能还想在overflow: none

.header-container

Answer 2

http://jsfiddle.net/SbpZG/

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

标题栏上的宽度问题

2 个答案: