如何利用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的使用，它先使我们的整个布局限制满屏的基础，然后在这个基础上再进行弹性盒的布局。