如何利用CSS3编写一个满屏的布局

如何利用CSS3编写一个满屏的布局

css3的出现能帮助我们更加轻松的实现各种想要的效果，例如写一个刚好满屏的布局，我们就可以利用CSS3的弹性盒模型来实现。

先来贴出html布局代码：

<%- include header %>
<div class="wrapper">
<div id="appswall">
<div class="adsapp-title"><button class="goback">返回</button><h1>精品推荐</h1></div>
<div id="adsApps">
<ul>
<li class="loading"></li>
</ul>
</div>
</div>
</div>

该布局很简单，一个顶部的导航栏，下面是主要内容

其最终实现的效果如下：



当然我这里实现了后台生成数据，填充在id为adsApps的div中。

要想实现弹性盒模型，需要我们在父标签中添加如下的css属性：display: -webkit-box;

另外，如果你使用过EXT的话，那你应该对flex属性也不会陌生，该属性的作用就像是权重分割，例如在div#adsApps上添加：-webkit-box-flex: 1;

实现效果的主要代码如下：

.wrapper{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: -webkit-box;
}
#appswall {
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
-webkit-box-pack: left;
-moz-box-orient: vertical;
-moz-box-align: stretch;
-moz-box-pack: left;
}
#adsApps{
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
overflow: auto;
}
.adsapp-title{background:-webkit-gradient(linear,0 0,0 100%,from(#f8f8f8),to(#e6e6e6)); height: 40px;
border-bottom: 1px solid #ccc;box-shadow: 0 0 8px #000;}

其中的一个技巧在于wrapper的使用，它先使我们的整个布局限制满屏的基础，然后在这个基础上再进行弹性盒的布局。