Question

我要做的是有一个像导航栏一样的引导程序，实际的导航栏在中心位于960px左右，但背景颜色跨越窗口的整个宽度。

但是，当窗口宽度小于960px时，我滚动，背景不会一直到最后。

是否可以在没有max-width（960px）自定义规则的情况下实现这一目标？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Page</title>
    <style type="text/css">
    #container {
        width: 960px;
        margin: 0 auto;
    }
    #nav {
        height: 33px;
        background-color: #cfcfcf;
    }
    </style>
</head>
<body>
<div id="nav">
    <div id="container">
        test
    </div>
</div>
</body>
</html>

提前致谢！

编辑：哎呀。在那里有一个额外的，虽然这不是问题。

Answer 1

高度必须位于内部div（#container）中。试试

#nav { background-color: #cfcfcf; }

#container {  
    height:33px;
    width:960px;
    margin: 0 auto; 
}

请参阅http://jsfiddle.net/wYGLj/

Answer 2

您需要导航div跨越整个页面。

#nav { width:100%; }

将适用于此案例。

Answer 3

你的CSS正常运作。因此，如果您希望它扩展屏幕的整个长度，请创建一个wrapper来处理该灰色元素。像这样。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Page</title>
    <style type="text/css">
    #wrapper {
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #cfcfcf;
    }
    #container {
        width: 960px;
        margin: 0 auto;
    }
    #nav {
        height: 33px;
    }
    </style>
</head>
<body>
<div id="wrapper">
<div id="nav">
    <div id="container">
        test
    </div>
</div>
</div>
</body>
</html>

Answer 4

我添加了

body {
    min-width:960px;
}

似乎解决了这个问题。

使div背景颜色跨越整个宽度

4 个答案: