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

回答

相關問題