HTML div宽度100％不起作用 [英] Html div width 100% not functioning
问题描述
我的HTML出现了一些问题，因此我正在发布代码.
There are some problems with my HTML, so I am posting the code.
第一个标签是带有id="header"的div.我给了它100％的宽度，并给了它一个背景图像.
The first tag is a div with id="header". I have given it 100% width and given it a background image.
在标头内还有另一个div和id="header-contents".我希望它以页面为中心，所以我给了它一个宽度，然后是margin:0 auto.可以在最大尺寸的浏览器上正常工作，但是当我放大浏览器或将浏览器的宽度调整为大约一半时，标头div的背景在某些时候开始消失，并且没有填充100％的宽度.
Inside the header there's another div with 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.
这是一开始的样子(并且应该始终看起来):
This is how it looks at first (and should always look):
这是我缩放或调整浏览器大小时的外观:
This is how it looks when I zoom or resize the browser:
正确的HTML和CSS是什么? 这是代码:
What is the proper HTML and CSS for it? Here's the code:
<!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的登录页面并弄清楚了.
It's all a matter of min-width in the #header. I checked out facebook's login page and figured it out.
这篇关于HTML div宽度100％不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
