css – Html div宽度100％不起作用

我的 HTML存在一些问题,所以我发布了代码.

第一个标签是id =“header”的div.我给它100％宽度并给它一个背景图像.

在标题内部还有另一个id =“header-contents”的div.我希望它集中在页面上,所以我给它一个宽度然后保证金：0自动.它适用于最大尺寸的浏览器,但是当我放大或缩小浏览器宽度大约一半时,标题div的背景在某个点开始消失并且不会填充100％的宽度.

这是它首先看起来的样子(并且应该总是看起来)：
intended look http://i49.tinypic.com/3505fnk.png

这是我缩放或调整浏览器大小时的外观：
after resize http://i46.tinypic.com/2lqg7r.png

什么是适当的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的登录页面并弄明白了.

原文地址：https://www.jb51.cc/css/216035.html

css – Html div宽度100％不起作用

解决方法

相关推荐