Question

我正在尝试创建一个单页网站，但我在排序基本布局方面遇到了一些麻烦。我想要的是当用户访问网站时，第一个div伸展以填充浏览器窗口（如http://whiteboard.is）。之后，第二个div是固定位置，但我可以设置手动高度，这样我就可以添加一大堆内容。

我尝试过使用背景大小的标签，但出于某种原因，它只是伸展以水平修复。它只是被设置为min-height：value。

任何想法为什么？

HTML

<body>

<section id="first" class="clearfix">
<div class="scanlines"></div>
</section>

<section id="second" class="clearfix">
<div class="scanlines"></div>
</section>

</body>

CSS

#first {
    background: url(1.jpg) no-repeat center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-width: 1024px;
    min-height: 768px;
    }

#second {
    background: url(3.jpg) center no-repeat fixed;
    position: relative;
    height: 8000px;
    width: 100%;
    }

.scanlines { 
    background: url(scanlines.png); 
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 25;
    }

Answer 1

我们在http://whiteboard.is上使用JavaScript（jQuery）设置第一个容器的大小 - 我知道这是一个旧帖子，但我认为它仍然值得回答。

我们有一些其他代码埋没了，但简单的答案就是这个（在页面加载后将其置于文档就绪函数或其他调用中）。

$('#first').css({
    'height' : $(window).height(),
    'width' : $(window).width()
});

在Whiteboard网站上，我们将这些存储为变量并在各个地方使用它们，但这是一个简单的答案，可以帮助您入门。

我们实际上将此函数应用于实用程序类，并在整个站点中将该类用于我们希望调整大小到浏览器窗口的元素。另请注意，调整窗口大小时重新运行此功能是很好的。

标记：

<section id="first" class="clearfix fillscreen">
    <div class="scanlines"></div>
</section>

使用Javascript：

// the basic function, used with a class instead of an ID
function fillscreen () {
    $('.fill-screen').css({
        'height' : $(window).height(),
        'width' : $(window).width()
    });
}

// run our sizing function on document ready
$(document).ready(function(){
    fillscreen();
});

// run it again anytime the window is resized
$(window).on('resize',function(){
    fillscreen();
});

Answer 2

position: absolute类上的.scanlines使块不在流量范围内，因此不会增加容器的大小。

Answer 3

您可能想尝试向.scanlines添加一些padding-left和padding-right。一定要在.scanlines上设置box-sizing：border-box。

这将强制内容也是垂直的。内容将尝试水平流动，因为您有宽度：100％。

修复背景尺寸：封面;问题

3 个答案: