CSS 使 div 背景颜色跨越整个宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14668620/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make div background color span entire width
提问by Tech163
What I'm trying to do is have a bootstrap like navbar where the actual navbar is around 960px in the center but have the background color span the entire width of the window.
我想要做的是有一个像导航栏这样的引导程序，其中实际的导航栏在中心大约 960 像素，但背景颜色跨越窗口的整个宽度。
However, when the window is less than 960px in width, and I scroll, the background doesn't go all the way to the end.
但是，当窗口的宽度小于 960 像素并且我滚动时，背景不会一直走到最后。
Is it possible to make this happen without having custom rules for max-width(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>
Thanks in advance!
提前致谢！
Edit: Oops. Had an extra in there, though that wasn't the issue.
编辑：哎呀。那里有一个额外的，虽然那不是问题。
采纳答案by Tech163
I added
我加了
body {
min-width:960px;
}
which seemed to fix the problem.
这似乎解决了这个问题。
回答by pbaris
The height has to be in the inner div (#container). try
高度必须在内部 div (#container) 中。尝试
#nav { background-color: #cfcfcf; }
#container {
height:33px;
width:960px;
margin: 0 auto;
}
回答by JakeGould
Your CSS is working as it should. So if you want it to extent the whole length of the screen, create a wrapperto handle that grey element. Like this.
您的 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>
回答by jchapa
You need your nav div to span the entire page.
你需要你的导航 div 来跨越整个页面。
#nav { width:100%; }
#nav { width:100%; }
will work in this case.
在这种情况下会起作用。
