javascript - 一页响应式网站？

Question

我正在尝试创建一个只有一个页面的网站，它是响应式的。 这个想法是用 anchor 向下滚动。

但是，我不知道如何让所有 div 按预期填满整个屏幕。

body {
    width: 100%;
    height: auto;
    font-family: Source Sans Pro, Century Gothic;
    background: url('images/bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
}

ul {
list-style: none;
}

#intro1 { 
font-family:'Press Start 2P', cursive; 
font-size: 80px; 
display: block; 
text-align: center; 
margin-bottom: auto; 
margin-top: auto; 
top: 50%;  
height: 100%;
width: 100%;
position: absolute; 
}

#intro2 { //This doesn't work. I've also tried to set top with pixels.
top:100%;
height:600px;
width: 100%;
position: absolute;
font-size: 80px; 
display: block; 
text-align: center; 
margin-bottom: auto; 
margin-top: auto; 
top: 50%;  
font-family: Source Sans Pro;
height: 100%;
width: 100%;
}

#products { //This works fine for some reason.
top: 800px;
width: 100%;
position: relative;
background: url('images/circuit.jpg');
font-family: Source Sans Pro;
font-size: 16px;
margin: 0;
text-align: center;
}

如何让每个 div 填满整个屏幕？ 我不想使用任何 jQuery 插件，我浏览过 几乎每一个都是免费的。

Answer 1

您可以使用 CSS 的 VH 单元。这实际上是总视口(viewport)高度的单位。 所以，100vh = 视口(viewport)的 100% 高度。

这是一个例子:

HTML:

<div id="content1" class="content">
    <a href="#content1">content1</a> | 
    <a href="#content2">content2</a> | 
    <a href="#content3">content3</a> 
</div>
<div id="content2" class="content">
    <a href="#content1">content1</a> | 
    <a href="#content2">content2</a> | 
    <a href="#content3">content3</a> 
</div>
<div id="content3" class="content">
    <a href="#content1">content1</a> | 
    <a href="#content2">content2</a> | 
    <a href="#content3">content3</a> 
</div>

CSS:

.content{height:100vh}
#content1{background:#EEE}
#content2{background:#CCC}
#content3{background:#AAA}

JSfiddle: http://jsfiddle.net/Vj3dZ/

引用:http://snook.ca/archives/html_and_css/vm-vh-units

注意:使用前，必须检查浏览器兼容性:http://caniuse.com/viewport-units