Html div 宽度 100% 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11196495/
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
Html div width 100% not functioning
提问by UmeRonaldo
There are some problems with my HTML, so I am posting the code.
我的 HTML 有一些问题，所以我发布了代码。
The first tag is a divwith id="header". I have given it 100% width and given it a background image.
第一个标签是divwith id="header"。我给了它 100% 的宽度并给它一个背景图像。
Inside the header there's another divwith id="header-contents". I want it centered on the page so I have given it a width and then margin:0 auto. It works fine with the max-sized browser but when I zoom in or resize the browser width to about half, the background of the header div starts to disappear at some point and does not fill in 100% width.
在标题内还有另一个div带有id="header-contents". 我希望它以页面为中心，所以我给了它一个宽度，然后margin:0 auto. 它适用于最大尺寸的浏览器，但是当我将浏览器宽度放大或调整到大约一半时，标题 div 的背景在某个时候开始消失并且不会填充 100% 宽度。
This is how it looks at first (and should always look):
这是它最初的样子（并且应该总是这样）：
This is how it looks when I zoom or resize the browser:
这是我缩放或调整浏览器大小时的外观：
What is the proper HTML and CSS for it? Here's the code:
什么是合适的 HTML 和 CSS？这是代码：
<!DOCTYPE HTML>
<html>
<style>
body
{
margin:0;
padding:0;
}
.clear
{
display:block;
clear:both;
}
#header
{
min-height:156px;
width:100%;
background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');
}
#head-contents
{
width:974px;
margin:0 auto;
height:156px;
}
#header ul
{
margin:85px 23px 0 0;
float:right;
list-style-type:none;
}
#header ul li
{
display:inline;
}
#header ul li a
{
margin-left:46px;
font-size:19px;
color:#fff;
text-decoration:none;
}
#header ul li a:hover ,
#header ul li a.active
{
color:#FD7600
}
</style>
<body>
<div id="header">
<div id="head-contents">
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRRlklPBeTiVsV7dycvDxqFyrU02d0grYf4rTUqL-2ZzGb8Qvbwimb37HgO" />
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
</body>
</html>
回答by UmeRonaldo
I have found the solution:
我找到了解决方案：
#header {
height: 156px;
min-width: 990px;
background-image: url('http://www.webdesignideas.org/images/bellevueBg.gif');
display: block;
}
#head-contents {
width: 974px;
margin: 0 auto;
height: 156px;
}
It's all a matter of min-width in the #header. I checked out facebook's login page and figured it out.
这完全是#header 中的最小宽度问题。我查看了facebook的登录页面并弄清楚了。
回答by UmeRonaldo
You must set the widthof your head-contentsas the min-widthof your header:
你必须将width你的head-contents作为min-width你的header：
#header {
min-height:156px;
display: block;
width:100%;
background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');
min-width: 974px; /* this is width of head-contents */
}
回答by Dheeru Rawat
#header {
min-height:156px;
width:100%;
background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');
}
回答by Samson
This is the style sheet which works with me:
这是与我一起使用的样式表：
body{
margin:0;
padding:0;
}
.clear{
display:block;
clear:both;
}
#header{
min-height:156px;
display: block;
width:100%;
background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');
}
#head-contents{
width:974px;
margin-left:200px;
height:156px;
}
#header ul {
margin:85px 23px 0 0;
float:right;
list-style-type:none;
}
#header ul li {
display:inline;
}
#header ul li a {
margin-left:46px;
font-size:19px;
color:#fff;
text-decoration:none;
}
#header ul li a:hover ,
#header ul li a.active {
color:#FD7600;
}
Resizing the window and setting the margins to auto will screw the position of your inner div because it s width doesn t fit the window.
调整窗口大小并将边距设置为 auto 会改变内部 div 的位置，因为它的宽度不适合窗口。
回答by Rob
Take out the background-image property from #header and apply this style to the body tag:
从 #header 中取出 background-image 属性并将此样式应用于 body 标记：
background: url('http://www.webdesignideas.org/images/bellevueBg.gif') 0 0 repeat-x #fff;
You will no longer have the problem you described. All you need to do now is cut down the background image to 156px height, using an image-editing software package like Photoshop.
您将不再遇到您描述的问题。您现在需要做的就是使用像 Photoshop 这样的图像编辑软件包将背景图像裁剪到 156 像素的高度。
Edit: here's the updated jsfiddle showing the solution: http://jsfiddle.net/eYrg8/35/
编辑：这是显示解决方案的更新的 jsfiddle：http: //jsfiddle.net/eYrg8/35/
