Question

我有一个网站，当在mozilla中查看时，即完全最大化窗口上的浏览器和Chrome浏览器在页脚和标题图像中实现了100％的宽度，但是当恢复（调整窗口大小）时，会出现一个滚动条，显然是因为页脚有4个固定宽度的部分，但背景图像不填充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;
    }

Answer 1

只需将其添加到CSS文件的正文部分即可。

<强> CSS

body {

    background-color:#000; 

}

Answer 2

“width：100％”表示，它将占用父元素的整个宽度。在您的情况下，body元素是#footerwrap的父元素。请记住，如果您没有在px中定义精确的宽度或在体内定义这样的参数（不是％），则其宽度将是浏览器的可见宽度。

body width = #footwwrap width =可见宽度

因此，当您减小窗口宽度时，＃footerwrap的宽度也会减小。

要解决您的问题，您应该使用#footerwrap的最小宽度。

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

在恢复浏览器窗口时，页脚和页眉的填充宽度不会达到100％

2 个答案: