原文提到了很多种方式来实现全屏,在这里仅仅摘出使用一行CSS代码实现的方法,非常简便快捷。
关键在于
.section { height: 100vh; }
vh就是viewport height的缩写,1vh等于浏览器高度的1%。vh可以毫不费力地获取任何时刻你的浏览器的当前高度,从而对你的section进行相应设置。
下面是一个DEMO。
效果演示:http://codepen.io/ckor/full/cf2134280cd25e8ac7e57f1b05bb0b49/
HTML代码:
<section class="intro">
<div class="content">
<h1>You can create full screen sections without javascript.</h1>
<p>The height is set to 90vh, that means 90% height.</p>
</div>
</section>
<section>
<div class="content">
<h1>Resize your browser and see how they adapt.</h1>
</div>
</section>
<section>
<div class="content">
<h1>It's amazing and fast.</h1>
</div>
</section>
<section>
<div class="content">
<h1>See the <a href="http://caniuse.com/#feat=viewport-units">browser support.</a></h1>
</div>
</section>
<footer>
Made by <a href="http://www.twitter.com/ckor">@ckor</a>
</footer>
CSS代码:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-weight: 500;
font-family: 'HelveticaNeue';
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
&:nth-of-type(2n) {
background-color: #FE4B74;
}
}
.intro {
height: 90vh;
}
.content {
display: table-cell;
vertical-align: middle;
}
h1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
p {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
a {
font-weight: 700;
color: #373B44;
position: relative;
&:hover{
opacity: 0.8;
}
&:active {
top: 1px;
}
}
footer {
padding: 1% 5%;
text-align:center;
background-color: #373B44;
color: white;
a {
color: #FE4B74;
font-weight: 500;
text-decoration: none;
}
}