我的 HTML 有一些问题，所以我发布了代码。
第一个标签是一个带有 id="header" 的 div。我给了它 100% 的宽度，并给了它一张背景图片。
在页眉内还有另一个 div 和 id="header-contents"。我希望它在页面上居中，所以我给了它一个宽度，然后是 margin:0 auto。它适用于最大尺寸的浏览器，但是当我放大浏览器宽度或将浏览器宽度调整到大约一半时，标题 div 的背景在某个时候开始消失并且不会填充 100% 宽度。
这是它最初的样子(而且应该总是这样):
这是我缩放或调整浏览器大小时的样子:
适合它的 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>
最佳答案
我找到了解决方案:
#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;
}
这都是#header 中最小宽度的问题。 我查看了 facebook 的登录页面并弄明白了。
关于css - HTML div 宽度 100% 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11196495/