1

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

我试过使用背景尺寸标签，但由于某种原因，它只能水平拉伸。垂直它只是设置为 min-height: 值。

任何想法为什么？

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;
    }
4

3 回答 3

2

We're using JavaScript (jQuery) on http://whiteboard.is to set the size of the first container - I know this is an old post, but I figure it still merits an answer.

Ours it a bit burried with some other code, but the simple answer is this (place this inside your document ready function or other call after the page is loaded).

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

On the Whiteboard site, we store these as variables and use them in various places, but this is a simple answer that should help get you started.

We actually apply this function to a utility class, and use that class throughout the site on elements we want to be sized to the browser window. Also note that it's good to rerun this function when the window is resized.

Markup:

<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();
});
于 2013-12-14T05:46:26.277 回答
1

position: absoluteon类将.scanlines块从流中取出，因此它不会增加其容器的大小。

于 2012-05-12T21:27:58.180 回答
0

您可能想尝试在 .scanlines 中添加一些 padding-left 和 padding-right。请务必在 .scanlines 上设置 box-sizing:border-box。

这也将迫使内容垂直。内容将尝试水平流动，因为您有宽度：100%。

于 2013-02-27T22:33:23.857 回答