如何使页脚背景拉伸屏幕的宽度答案

【问题标题】：How to make Footer background stretch the width of the screen如何使页脚背景拉伸屏幕的宽度
【发布时间】：2013-12-25 03:17:10
【问题描述】：

首先，我只想说一下我不太擅长编码，这对我来说是第一次。我的页脚有问题；页脚的背景，当它对于更大的计算机屏幕来说太小时，就会像这样重复自己：http://prntscr.com/29fxeu

我希望获得背景，以便它自动调整到每个屏幕宽度以适应整个过程。那可能吗？我在 JSFiddle 上找到了它：http://jsfiddle.net/HXs2A/1/

这里是使用的 HTML：（如果有错误请见谅）

<body>
<!-- Footer border Start-->
<div id='footer-wrapper'>
<div style='clear:both;'/>
  </div>
<!-- Footer border End-->
<div id='lower'>

<div id='lower-wrapper'>

<div id='lowerbar-wrapper'>

<b:section class='lowerbar' id='Column 1' preferred='yes'/> 
</div>
<div id='lowerbar-wrapper'>

<b:section class='lowerbar' id='Column 2' preferred='yes'/> 
</div>
 <div id='lowerbar-wrapper'>

<b:section class='lowerbar' id='Column 3' preferred='yes'/> 
</div>
<div style='clear: both;'/>
</div>
</div>
</body>

还有 CSS：

#footer-wrapper {clear: both;width: 100%; height:4px; background: #46A28D;}
/*----- Three Column Widget (Green Border) STARTS-----*/
#lower { 
margin:auto; 
padding: 0px 0px 10px 0px; 
width: 100%; 
height:120px;
background: url(http://1.bp.blogspot.com/-p6zskT7-Xd0/UqN_39ROUYI/AAAAAAAADd0/sXrkWxgY9-M/s1600/footer.png) repeat scroll 0 0 #222222; 
} 
#lower-wrapper { 
background: none; repeat scroll 0 0 #222222; 
margin:auto; 
padding: 20px 0px 20px 0px; 
width: 100%;
border:0; 
} 
#lowerbar-wrapper { 
background: none; repeat scroll 0 0 #222222; 
float: left; 
margin: 0px 5px auto; 
padding-bottom: 20px; 
width: 30%;
text-align: justify; 
color:#ddd; 
font: bold 12px Arial, Tahoma, Verdana; 
line-height: 1.6em; 
word-wrap: break-word; 
overflow: hidden; 
} 
.lowerbar {margin: 0; padding: 0;} 
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;} 
.lowerbar h2 { 
margin: 0px 0px 10px 0px; 
padding: 3px 0px 3px 0px; 
text-align: left; 
border:0; 
color:#46A28D; 
text-transform:uppercase; 
font: bold 14px Arial, Tahoma, Verdana; 
} 
.lowerbar ul { 
color:#fff; 
margin: 0 auto; 
padding: 0; 
list-style-type: none; 
} 
.lowerbar li { 
display:block; 
color:#fff; 
line-height: 1.6em; 
margin-left: 0px !important; 
padding: 0px; 
list-style-type: none; 
} 
.lowerbar li a { 
text-decoration:none; color: #DBDBDB; 
} 
.lowerbar li a:hover { 
text-decoration:underline; 
} 
.lowerbar li:hover { 
display:block; 
background: #222; 
}

谢谢！

【问题讨论】：

标签： html css background-image footer sticky-footer

【解决方案1】：

到#lower 添加 background-size: 100% 100%;

并删除height:120px;，因为它会强制背景在奇数比例屏幕上拉伸。

【讨论】：

background-size:cover 有另一个属性，但它不适用于您的问题。
感谢这有很大帮助！您对背景被拉伸是正确的，但不幸的是，移除高度并没有改变这一点。不过我不介意。

【解决方案2】：

你是说背景尺寸？以下代码更改对我有用 (CSS3)。

#lower { 
margin:auto; 
padding: 0px 0px 10px 0px; 
width: 100%; 
height:120px;
background: url(http://1.bp.blogspot.com/-p6zskT7-Xd0/UqN_39ROUYI/AAAAAAAADd0/sXrkWxgY9-M/s1600/footer.png); 
background-size:100% 100%;
background-repeate: no-repeat;
}

见http://www.w3schools.com/css/css3_backgrounds.asp

但是，较旧的浏览器可能会给出不同的结果。

【讨论】：

谢谢这也很好。我还检查了其他浏览器，它似乎工作正常，非常有帮助！

【解决方案3】：

#lower { 
  margin:auto; 
  padding: 0; 
  width: 100%; 
  height: 120px;
  background: #222222 url(http://1.bp.blogspot.com/-p6zskT7-Xd0/UqN_39ROUYI/AAAAAAAADd0/sXrkWxgY9-M/s1600/footer.png) no-repeat;
  background-size: cover;
}

*注意：在 HTML 中为元素分配属性时，请使用 " 而不是 '

对<div id="lower">

错误<div id='lower'>

【讨论】：

感谢您，非常有帮助，尽管由于某种原因，在使用“覆盖”时，图片的末尾被隐藏在浏览器下。不过，可能只是我自己的编码中的一个缺陷。感谢您提供有关分配属性的提示:)