滚动时固定背景结束

我遇到问题。我想打一个全页大小的背景，但我始终面临着同样的问题：滚动时固定背景结束

Here it is

正如你可以看到我的网页是高于100％，当我滚动加入我的背景ends.Background在DIV id=wrapper这里是我的代码

HTML（JQ）的一部分：

<body> 
<div id='wrapper'> 
    <!--content--> 
</div> 
<script> 
$(document).ready(function() { 
    $('#wrapper').fadeIn(1000); 
}) 
</script>

CSS：

html,body { 
    height:100%; 
} 
body { 
    min-height: 100%; 
} 
#wrapper { 
    background: url(../bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height:100%; 
    display:none; 
    background-attachment: fixed; 
}

我正在寻找答案，并阅读了Stackoverflow中的问题（f.e。 https://stackoverflow.com/a/6654996/3726786）但没有什么帮助。谢谢你的帮助！

来源

2017-04-11 user3726786

嗨的用户，首先欢迎，你有一个小提琴或链接的例子吗？ – dutchsociety

您是否需要身体的html，body，＃wrapper和'min-height：100％'这些'height：100％'声明？如果你删除它们，它会起作用。 – vbulant

@dutchsociety https://jsfiddle.net/jv0ygnzq/这里:)类似的东西 – user3726786

每个浏览器都有各自元素上的边距和填充的默认值。所以除非你明确地设置了值，否则会有默认的间距。您可以使用下面的CSS比如做到这一点：

body { 
    margin:0; 
    padding:0; 
}

什么更恼人的是，每一个不同的浏览器将对申报单的空白和边距不同的默认值（例如火狐可能有10px的边距和IE可能有8像素保证金）

通常的做法是重置样式表顶部的值。

您可以通过所有这些值设置为0手动做到这一点，或者你可以使用类似CSS reset

编辑：This网站并不需要您注册一个通讯，以获得CSS。

来源

2017-04-11 08:01:56 yarwest

它并不真正的工作：/我使用bootstrap所以边际和填充我认为是重置，因为没有顶部边缘 – user3726786

我试图搞乱你的小提琴并将身体的边缘设置为0似乎工作。所以问题确实存在于默认值中。 – yarwest

我认为我已经修好了，谢谢，我所做的只是将包装高度：100％'设置为'最小高度：100％'，允许它动态扩展。 – user3726786

在你的代码image将不会高于100%，这是因为它已经采取height of 100%分配给body，现在你可以看到scroll-bar at y-axis那是因为你还没有更改默认margin property这是8px to 0px。

body{ 
    margin:8px; /*Default margin set that to 0px*/ 
}

见这两jsFiddle

https://jsfiddle.net/samxrcmz/

https://jsfiddle.net/samxrcmz/1/

来源

2017-04-11 08:04:57 frnt

你的解决方案的工作原理，但在我的答案，'''margin：8px;'''中指定的是一个默认值，每个浏览器不同。 – yarwest

@yarwest可能是，但已经设置为0px在其他浏览器上也得到相同的输出。 – frnt

我同意，就像我，它的工作原理，它只是一个具体的细节。 – yarwest

滚动时固定背景结束

回答

相关问题