1

我有一个简单的页面，其正文具有图像背景，带有background-size:cover. 无论内容量如何，我都设置html { height:100% }为填满整个页面。到目前为止，一切都按预期工作。

我添加了一个div并设置了position:absolute; right:0; width:200px;This，再次按预期工作，直到我添加内容。

当这个 div 被填充太多以至于内容占用的空间超过页面的高度时，就会出现滚动条。向下滚动显示背景图像实际上并未覆盖整个页面。

这是因为我的 div 高于 HTML 高度的 100%。

我该如何解决这个问题？

4

3 回答 3

1

您可以添加background-attachment:fixed;到您的body元素。

这种方法的注意事项是背景现在固定在视口中并且不会随着文档滚动。

https://developer.mozilla.org/en-US/docs/CSS/background-attachment

于 2012-11-05T17:32:02.897 回答
0

像我在这个 codepen中那样做，它应该可以正常工作。

更新：（使用一些 JS）

有关更完整的解决方案，请参阅此 codepen。

于 2012-11-05T17:15:49.953 回答
0

而不是通过position:absolute我float尽可能多地使用定位任何项目。

我还<div>为其中的全部内容添加了一个包装器，<body>这有助于正确格式化并<div>相应地扩展包含内容。标记及其背景属性现在body可以正常运行！

于 2012-11-09T21:52:46.710 回答