2

我想要做的是有一个像导航栏这样的引导程序，其中实际的导航栏在中心大约 960 像素，但背景颜色跨越了窗口的整个宽度。

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

是否可以在没有自定义最大宽度（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>

提前致谢！

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

4

4 回答 4

1

高度必须在内部 div (#container) 中。尝试

#nav { background-color: #cfcfcf; }

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

见http://jsfiddle.net/wYGLj/

于 2013-02-03T01:41:06.327 回答
0

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

#nav { width:100%; }

将在这种情况下工作。

于 2013-02-03T01:40:10.117 回答
0

您的 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>
于 2013-02-03T01:42:05.053 回答
0

我添加了

body {
    min-width:960px;
}

这似乎解决了这个问题。

于 2013-02-03T14:23:24.060 回答