logo标签列表

HTML div宽度100％无法正常工作

csshtmlwidth
8

我的HTML代码有些问题，所以我在这里发布它。

第一个标签是一个带有id="header"的div。我给它设置了100%的宽度并放置了一个背景图片。

在头部中还有另一个带有id="header-contents"的div。我想要它居中，所以我设置了它的宽度然后使用了margin:0 auto。在最大化浏览器时一切正常，但当我缩小或调整浏览器宽度到大约一半时，头部

的背景开始消失并且不能填满100%的宽度。

以下是它应该一直呈现的样子： intended look

以下是当我缩小或调整浏览器时的样子： after resize

什么是正确的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>
你应该学会使用 jsfiddle，这样我们可以更方便地提供帮助。谷歌一下吧！ - Samson
这是代码演示链接： http://jsfiddle.net/eYrg8/ - UmeRonaldo
5个回答
8
我已经找到了解决方案：
#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 的登录页面并找到了解决方法。

4

演示链接

您必须将您的head-contents的宽度设置为您的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 */
}
0

这是与我一起使用的样式表：

  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的位置出现问题，因为它的宽度不适合窗口。
先生，我正在使用Chrome浏览器，你能看到我在发布的链接中吗？结果区域的背景图片没有铺满整个宽度，你看得到吗？ - UmeRonaldo
你能以某种方式把页面发送给我吗？ - UmeRonaldo
好的，抱歉但我真的不知道我的代码哪里有问题，谢谢。 - UmeRonaldo
0
从 #header 中删除 background-image 属性，并将此样式应用于 body 标签：
background: url('http://www.webdesignideas.org/images/bellevueBg.gif') 0 0 repeat-x #fff;

你将不再遇到你所描述的问题。现在你需要做的就是使用像Photoshop这样的图像编辑软件将背景图片裁剪到156px高度。
编辑：这里是更新后的jsfiddle，展示了解决方案：http://jsfiddle.net/eYrg8/35/
0
#header {   
    min-height:156px;
    width:100%;
    background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接