Css 使div背景色跨越整个宽度_Css

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

css

Css 使div背景色跨越整个宽度,css,Css,我想做的是有一个像navbar这样的引导程序，实际的navbar在中间大约是960px，但是背景色覆盖整个窗口的宽度然而，当窗口的宽度小于960px，并且我滚动时，背景不会一直滚动到最后是否可以在没有最大宽度（960px）的自定义规则的情况下实现这一点测试页 #容器{ 宽度：960px；保证金：0自动； } #导航{ 高度：33像素；背景色：#cfcfcf； } 测试提前谢谢编辑：哎呀。在那里有一个额外的，虽然这不是问题。您需要导航div来覆盖整个页面 #导航{宽度：100%

我想做的是有一个像navbar这样的引导程序，实际的navbar在中间大约是960px，但是背景色覆盖整个窗口的宽度

然而，当窗口的宽度小于960px，并且我滚动时，背景不会一直滚动到最后

是否可以在没有最大宽度（960px）的自定义规则的情况下实现这一点


测试页
#容器{
宽度：960px；
保证金：0自动；
}
#导航{
高度：33像素；
背景色：#cfcfcf；
}
测试

提前谢谢

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

您需要导航div来覆盖整个页面

#导航{宽度：100%；}

将在这种情况下工作。

您需要导航div来覆盖整个页面

#导航{宽度：100%；}

将在这种情况下工作。

高度必须在内部分区（#容器）中。试一试

请参见

高度必须在内部div（#容器）中。试一试

请参见

您的CSS正在正常工作。因此，如果您希望它扩展整个屏幕的长度，请创建一个

包装器来处理该灰色元素。像这样
<!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>


测试页
#包装纸{
宽度：100%；
保证金：0；
填充：0；
背景色：#cfcfcf；
}
#容器{
宽度：960px；
保证金：0自动；
}
#导航{
高度：33像素；
}
测试
您的CSS工作正常。因此，如果您希望它扩展整个屏幕的长度，请创建一个包装器来处理该灰色元素。像这样
<!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>


测试页
#包装纸{
宽度：100%；
保证金：0；
填充：0；
背景色：#cfcfcf；
}
#容器{
宽度：960px；
保证金：0自动；
}
#导航{
高度：33像素；
}
测试
我添加了
body {
    min-width:960px;
}

这似乎解决了问题。
我补充道
body {
    min-width:960px;
}

这似乎解决了问题。
有趣的是，它在Windows上的Chrome中运行良好。有趣的是，它在Windows上的Chrome中运行良好。@Tech163请发布您自己问题的答案，然后。@Tech163请发布您自己问题的答案，然后。