我的网页包含几个 div。有些设置为 width: 100%,因此它们填充了整个页面宽度。但是在页面顶部,在第一个元素出现之前有一个小空格。此外,从跨越整个页面宽度的元素左右可以看到相同的空白。
我不知道为什么。如果我设置:
html, body {
width: 100%;
}
然后空白仍然存在,但页面只是被拉伸以适合 div 的图像宽度。
任何人都可以帮忙吗?这可能很简单,但我必须忽略一些东西。谢谢你。
编辑:我必须提到我正在使用视差元素。这使用了填充,因此图像确实填充了整个 div,并且不会在顶部留下黑色区域。HTML 是:
<div class="js-background-1 container">
</div>
CSS:
.container {
padding-top: 200px;
}
.js-background-1 {
background: transparent url(url/to/image) center 0 no-repeat;
}
和javascript:
<script type="text/javascript">
var $window = $(window);
var velocity = 0.4;
function update(){
var pos = $window.scrollTop();
$('.container').each(function() {
var $element = $(this);
var height = $element.height();
$(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px');
});
};
$window.bind('scroll', update);
</script>
我使用了来自http://www.webdesign.org/how-to-create-a-parallax-scrolling-website.22336.html的教程,所以它来自哪里。我为我的网站更改了一些 HTML,但其余部分相同。
我看到关于边距和填充设置为 0 的评论,但是如果滚动不够远,这会导致我的 div 有一个空白区域。