Question

我有问题。我想制作一个整页大小的背景，但我总是遇到同样的问题：

Here it is

正如您所看到的，我的页面高于100％，当我滚动背景时结束。在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）但没有任何帮助。谢谢你的帮助！

Answer 1

在您的代码中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/

Answer 2

每个浏览器都有自己的默认值，用于各种元素的边距和填充。因此，除非您明确设置值，否则将存在默认间距。例如，您可以使用以下CSS执行此操作：

body {
    margin:0;
    padding:0;
}

更令人烦恼的是，每个不同的浏览器在div上都有不同的填充和边距默认值（例如Firefox可能有10px的边距，IE可能有8px的边距）

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

您可以通过将所有这些值设置为0来手动执行此操作，也可以使用CSS reset

之类的操作

编辑：This网站不要求您注册简报以获取CSS。

修复了滚动时背景的结束

2 个答案: