向下还原浏览器窗口时，页脚和页眉不填充宽度 100 %答案

【问题标题】：footer and header don't fill width 100 % when restoring down the browser window向下还原浏览器窗口时，页脚和页眉不填充宽度 100 %
【发布时间】：2014-02-14 17:08:12
【问题描述】：

我有一个网站，当在 mozilla、即、chrome 和 safari 中在完全最大化的窗口上查看时，页脚和页眉图像中的宽度达到 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;
    }

【问题讨论】：

请编码或更好，一个 JSFiddle
你的问题我要说的措辞不好，我很难理解你的问题是什么？但据我所知，当页面宽度扩展然后向右滚动时，背景不会一直保持黑色？

标签： css width footer

【解决方案1】：

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

CSS

body {

    background-color:#000; 

}

【讨论】：

【解决方案2】：

"width: 100%" 表示，它将占据父元素的全宽。在您的情况下，body 元素是#footerwrap 的父元素。请记住，如果您没有在正文中以 px 或此类参数（不是以 % 为单位）定义精确的宽度，则其宽度将是浏览器的可见宽度。

正文宽度 = #footerwrap 宽度 = 可见宽度

所以当你减小窗口宽度时，#footerwrap 的宽度也会减小。

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

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

【讨论】：