Html div width 100％not working

我的HTML存在一些问题，所以我发布了代码。Html div width 100％not working

第一个标记是div与id="header"。我给它100％的宽度并给它一个背景图片。

在标题里面还有另一个div与id="header-contents"。我希望它集中在页面上，所以我给它一个宽度，然后margin:0 auto。它适用于最大尺寸的浏览器，但是当我放大浏览器宽度或将浏览器宽度调整为大约一半时，标题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>

来源

2012-06-25 UmeRonaldo

你应该学会使用的jsfiddle所以我们可以帮助更容易。去谷歌上查询！ – Samson

这里的小提琴 http://jsfiddle.net/eYrg8/ – UmeRonaldo

这是样式表与我的作品：

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; 
}

调整窗口大小和设置页边距为自动，因为它那宽度会搞砸你内心的div的位置不适合窗户。

来源

2012-06-25 20:32:37 Samson

我正在寻找解决方案 – UmeRonaldo

点击链接！:) – Samson

我做了，我想我没有让我的问题清楚。 – UmeRonaldo

取出从的#header背景图像属性而这种风格应用到身体标记：

background: url('http://www.webdesignideas.org/images/bellevueBg.gif') 0 0 repeat-x #fff;

您将不再有你所描述的问题。您现在需要做的就是使用像Photoshop这样的图像编辑软件包将背景图像裁剪为156px高度。

编辑：这里的显示解决方案的更新的jsfiddle：http://jsfiddle.net/eYrg8/35/

来源

2012-06-25 21:33:39 Rob

我已经找到了解决办法：

#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的登录页面，并找出它。

来源

2012-06-26 08:30:13 UmeRonaldo

Working FIDDLE Demo

必须设定head-contents的width作为header的min-width：

#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 */ 
}

来源

2013-05-21 02:30:08

#header { 
    min-height:156px; 
    width:100%; 
    background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif'); 
}

来源

2014-09-13 15:18:02

Html div width 100％not working

回答

相关问题