页面底部有白条怎么解决呢？

Question

我在页面里面放置了一个大的div给他设置了background类，但是页面底部在火狐浏览器里面总是底部有一条白条，同时我也要保证内容增加的时候能够滚动。。。具体的样式就是下面的CSS

.background{

background: url(我的图片) top;
background-size: 100%;
height: 100%;
width: 100%;

},
底部是这样的白条

但是在谷歌浏览器里面却没有这样的直接填满了底部，要如何适配才好呢

Answer 1

使用了overflow:hidden解决了问题，应该是清除浮动和bfc的问题

Answer 2

如果你想背景全屏并且里面内容滚动背景不动可以这样
background-size设一个值只是保持纵横比并纵向拉伸

body{
    background:url() no-repeat;
    background-size:100% 100%;
    background-attachment: fixed;
}

Answer 3

background: url(地址) top/cover no-repeat fixed;

Answer 4

background-size: 100% 100%;

这样试试?