Html 如何让横幅占据屏幕的整个宽度 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13092990/
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
How to make a banner take up the whole width of the screen CSS
提问by Cameron Howson
i need the div bar to take up the whole width of the screen. I've tried using width:1920px; but then if i change my screen res it gives it a scroll bar. I've also tried width:100%; but that didn't work either!
我需要 div 栏占据屏幕的整个宽度。我试过使用 width:1920px; 但是如果我改变我的屏幕分辨率，它会给它一个滚动条。我也试过 width:100%; 但这也不起作用！
CSS
CSS
#bar {
background: white;
font-family: Designio;
margin-top: -76px;
position: absoulte;
top: 115px;
padding: 15px;
height: 60px;
width: 1930px;
margin-left: -600px;
background-size: 100%;
}
body {
min-width: 768px;
margin: 0px;
background: #0e6585;
font-size: 40px;
}
img.top {
display: block;
margin-left: auto;
margin-right: auto;
}
#container {
height: 768px;
background: #0e6585;
font-family: Designio
}
#inner {
text-decoration: none;
box-shadow: inset 1px 1px 10px 2px #fff;
border-radius: 50px;
margin: 0 auto;
margin-top: 100px;
width: 800px;
height: 600px;
background: #0e6585;
padding: 20px;
color: #946e44;
text-align: center;
}
#nav a.active {
background-color: #0e6586;
color: white;
}
#nav {
height: 10px;
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0px;
background-color: white;
margin-top: -10px;
border-bottom: 1px solid white;
}
#nav ul {
list-style: none;
width: 900px;
margin: 0 auto;
padding: 0;
text-align: center
}
#nav li {
float: left;
text-align: center
}
#nav li a {
margin-top: 15px;
display: block;
padding: 8px 15px;
text-decoration: none;
color: #0e6585;
border-right: 1px solid #ccc;
text-align: center
}
#nav li a:hover {
color: #0e6586;
background-color: white;
text-align: center
}
HTML
HTML
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/Primary.css">
</head>
<body>
<div id="container">
<div id="inner">
<div style="margin-top: -120px">
<div id ="bar">
<div id="nav">
<ul>
<li>
<li>
<a href="home.html" class="active">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Graphics</a>
</li>
<li>
<a href="#">Web Design</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
回答by tuff
To get an element to fill the width of the viewport, it should either be absolutely positioned, and a descendant only of elements which also fill the width of the viewport (eg: body, descendant divs of bodywhich do not have set widths), OR it should be fixed position. Then, the element needs to have left: 0and right: 0.
要让一个元素填充视口的宽度，它应该是绝对定位的，并且只能是也填充视口宽度的元素的后代（例如：body，其后代 divbody没有设置宽度），或者它应该是固定位置。然后，该元素需要具有left: 0和right: 0。
Change your #barruleset to this:
将您的#bar规则集更改为：
#bar{
background:white;
font-family:Designio;
position:absolute;
left: 0;
right: 0;
padding:15px;
height:60px;
background-size:100%;
}
summary:
概括：
- Remove all redundant sizing and negative margin properties.
- Fix the typo in your stylesheet - change
position: absoultetoposition: absolute. - Set
left: 0andright: 0.
- 删除所有多余的尺寸和负边距属性。
- 修复样式表中的错字 - 更改
position: absoulte为position: absolute. - 设置
left: 0和right: 0。
回答by Joel Etherton
Use margin on your parent div.
在您的父 div 上使用边距。
.container
{
margin-left: 0px;
margin-right: 0px;
}
A fiddle: http://jsfiddle.net/PVKbp/
小提琴：http: //jsfiddle.net/PVKbp/
In another blaring omission of reading, your #barelement is set to position absolutely within two other elements. You'll need to take it out of the the container (unless you need it positioned within the container) in order for left: 0; right: 0to work properly. If you need it to be within the container, you'll also need to extend the container using the margin properties above.
在另一个明显的阅读遗漏中，您的#bar元素被设置为绝对位于其他两个元素内。您需要将其从容器中取出（除非您需要将其放置在容器内）才能left: 0; right: 0正常工作。如果您需要它在容器内，您还需要使用上面的边距属性扩展容器。
回答by user3033991
You could use width:*;. That should make it take up the whole screen in width.
你可以使用width:*;. 这应该使它占据整个屏幕的宽度。
