頁腳和標題在恢復瀏覽器窗口時不填充寬度100％

我有一個網站，當在mozilla中查看時，ie，chrome和safari在完全最大化的窗口上實現了頁腳和頁眉圖像的100％寬度，但恢復下來（調整窗口大小）滾動條出現，顯然是因爲頁腳有4個部分是固定的寬度，但背景圖像不填充100％的寬度？我無法弄清楚它是什麼。任何幫助將不勝感激，謝謝。頁腳和標題在恢復瀏覽器窗口時不填充寬度100％

http://jsfiddle.net/mveq4/

/*footer*/ 
    div#footerwrap { 
     width:100%; 
     height:5px; 
     clear:both; 
     background:url(images/footerred.png)repeat-x; 
     margin:0; 
     padding:0; 
    } 
    div#footerwrap2 { 
     width:100%; 
     height:550px; 
     clear:both; 
     background-color:#222222; 
     margin:0; 
     padding:0; 
     padding-bottom:0.3em; 
    } 
    div#footer { 
     font: 9pt Arial, Helvetica, sans-serif; 
     clear:both; 
     padding:0em; 
     color:#fff; 
     height:550px; 
     margin:0px auto; 
     width:1000px; 
     text-align:center; 
    } 
    div#footer a { 
     color:#d41919; 
    } 
    div#footer a:hover { 
     color:#fff; 
    } 
    div#footer a:visited { 
     color:#d41919; 
    } 
    div#firstfooter { 
     margin:0; 
     float:left; 
     height:370px; 
     padding:0em; 
     padding-top:0.9em; 
     width:220px; 
     font: bold 10pt Arial, Verdana, sans-serif; 
     text-align:left; 
     color:#d41919; 
    } 
    div#firstfooter a { 
     color:#d41919; 
    } 
    div#footernav { 
     margin:0em; 
     padding:0em; 
     padding-top:1em; 
     font: 11pt Arial, Verdana, sans-serif; 
     float:left; 
     text-decoration:none; 
     text-align:left; 
     color:#d41919; 
     width:200px; 
     list-style:none; 
     font-weight:bold; 
    } 
    div#footernav a { 
     color:#d41919; 
    } 
    div#footernav a:hover { 
     color:#fff; 
    } 
    ul.footermenu { 
     margin:0; 
     padding:0; 
     list-style:none; 
     font-size:9pt; 
     font-family:Arial, Verdana, sans-serif; 
     color:#d41919; 
    } 
    ul.footermenu>li { 
     list-style:none; 
     color:#d41919; 
    } 
    ul.footermenu li a { 
     padding:0.5em; 
     padding-bottom:0.30em; 
     padding-top:0.40em; 
     text-decoration: none; 
     outline:none; 
     line-height:2.5em; 
     color:#d41919; 
    } 
    ul.footermenu li a:link { 
     color:#d41919; 
     list-style:none; 
    } 
    ul.footermenu li a:visited { 
     color:#d41919; 
    } 
    ul.footermenu li a:hover { 
     color:#fff; 
    } 
    div#secondfooter { 
     margin:0; 
     float:left; 
     height:370px; 
     padding:0em; 
     padding-top:1em; 
     width:250px; 
     font: bold 9pt Arial, Verdana, sans-serif; 
     text-align:left; 
     color:#fff; 
    } 
    div#secondfooter a { 
     color:#fff; 
    } 
    div#secondfooter a:hover { 
     color:#fff; 
    } 
    textarea { 
     overflow:auto; 
    } 
    /*contact*/ 
    #fieldset { 
     width:250px; 
     height:250px; 
     padding:1em; 
     padding-left:0em; 
     margin:0; 
     border:none; 
     text-align:justify; 
     float:left; 
    } 
    input { 
     color: #fff; 
     background: #333; 
     border: 1px solid #333; 
     padding:0.8em; 
    } 
    .submitinput { 
     color: #d41919; 
     background: #333; 
     border: 1px solid #333; 
     cursor:pointer; 
     padding:0.2em; 
     text-align:center; 
    } 
    textarea { 
     color: #fff; 
     background: #333; 
     border: 1px solid #333; 
     padding:0.2em; 
    } 
    div#thirdfooter { 
     margin:0; 
     float:left; 
     height:500px; 
     padding:0em; 
     padding-top:1em; 
     width:250px; 
     font: bold 9pt Arial, Verdana, sans-serif; 
     text-align:left; 
     color:#fff; 
    } 
    div#thirdfooter a { 
     color:#fff; 
    } 
    div#thirdfooter a:hover { 
     color:#fff; 
    } 
    div#rightfooter { 
     margin:0em; 
     margin-left:750px; 
     padding:0em; 
     padding-top:1em; 
     height:500px; 
     width:250px; 
     font: 9pt Arial, Verdana, sans-serif; 
     color:#fff; 
     text-align:left; 
    } 
    div#rightfooter a { 
     color:#fff; 
    } 
    div#rightfooter a:hover { 
     color:#fff; 
    } 
    div#footerbottom { 
     clear:both; 
     background-color:#d41919; 
     height:60px; 
     width:100%; 
     color:#fff; 
     font: 8pt Arial, Helvetica, sans-serif; 
     padding:0em; 
     padding-top:0.5em; 
     margin:0px auto; 
     text-align:center; 
    } 
    div#footerbottom a { 
     text-decoration:none; 
     outline:none; 
     color:#fff; 
    } 
    div#footerbottom a:hover { 
     color:#000; 
    }

來源

2014-02-14 user2073133

代碼請或更好，但一個的jsfiddle –

你的問題，我不得不說的是措辭不當，我覺得很難理解你的問題是什麼？但從我能猜到的是，當擴展頁面寬度時，背景不會一直處於黑色狀態，然後向右滾動？ –

只需添加到您的CSS文件的身體部分。

CSS

body { 

    background-color:#000; 

}

來源

2014-03-06 01:57:29

「寬度：100％」的意思，這將需要父元素的整個寬度。在你的情況下，body元素是#footerwrap的父項。記住，如果你沒有在px中定義一個確切的寬度或者在body中定義了這樣的參數（不是％），它的寬度就是瀏覽器的可見寬度。

車身寬度= #footerwrap寬度=可見寬度

所以，當你減少窗口寬度，#footerwrap的寬度也減小。

要解決您的問題，您應該使用#footerwrap的最小寬度。

div#footerwrap, 
div#footerwrap2 { 
    width: 100%; 
    min-width: 1000px; /* Equal to the inner element's width */ 
}

來源

2014-03-06 02:26:31 Iqbal

頁腳和標題在恢復瀏覽器窗口時不填充寬度100％

回答

相關問題