absolute及flex兼容前言

flex弹性布局需要现代浏览器才能支持，但是在当下我们很大一部分电脑页面还是需要考虑IE8，IE9浏览器，所以出于浏览器的兼容性问题，在电脑端使用flex，或者老一点的box-flex弹性布局的新旧规范有些让人瞻前顾后，展不开手脚。除非你的公司特强强势，或者你的老板说了，我们不管IE，这个时候你才能大胆使用flex弹性布局。但是flex弹性布局确实可以简化我们的布局，让我们布局更加省时，更加高效，可以抛弃很多JS对布局的计算。

其实呢，css的奥秘非常多，只要你能钻研，就可以发现，早先的CSS2的属性就可以供我们实现一些简陋的flex布局模式。之前在float的讲解中，我们介绍了使用float实现纯粹的横向flex布局模拟，如果你不清楚，可以连接过去查看：float实现flex弹性布局模拟。

今天，我们就absolute的技巧应用，来实现不完全的纵向flex弹性布局模拟。

absolute实现flex弹性布局模拟

我们根据代码效果来讲解，好理解些

<div class="absflex_cont">
</div>
<style>
    .absflex_cont{
        border:1px solid #bababa;
        position:fixed;
        z-index: 2;
        right:0;
        bottom:0;
        top:0;
        width:360px;
        background:#0632B0;
    }
</style>

效果如上。css样式中，fixed的和absolute有一样的特性，我们并没有给这个div设置高度，而是通过：top:0;bottom:0;来设置div的高度。这个好理解，就是说这个div上顶着天，下踩着地，那就是百分百的高度了。

<div class="absflex_cont">
    <div class="absflex_top">
        妹纸前端侧边栏
    </div>
    <div class="absflex">
       <ul>
           <li>mooshine</li>
           <li>妹纸前端</li>
           <li>妹子前端</li>
           <li>absolute纵向布局</li>
           <li>flex弹性布局</li>
           <li>mooshine</li>
           <li>妹纸前端</li>
           <li>妹子前端</li>
           <li>absolute纵向布局</li>
           <li>flex弹性布局</li>
           <li>mooshine</li>
           <li>妹纸前端</li>
           <li>妹子前端</li>
           <li>absolute纵向布局</li>
           <li>flex弹性布局</li>
           <li>flex弹性布局</li>
           <li>mooshine</li>
           <li>妹纸前端</li>
           <li>妹子前端</li>
           <li>absolute纵向布局</li>
           <li>flex弹性布局</li>
       </ul>
    </div>
    <div class="absflex_bottom">
        <a href="javascript:;" class="absflex_btn">取消</a><a href="javascript:;" class="absflex_btn">确定</a>
    </div>
</div>

<style>
    .absflex_cont{
        border:1px solid #bababa;
        position:fixed;
        z-index: 2;
        right:0;
        bottom:0;
        top:0;
        width:360px;
        background:#0632B0;
    }
    .absflex_top{
        line-height:42px;
        text-indent:2em;
        font-size:15px;
        background:#E88A03;
        color:#fff;
    }
    .absflex_bottom{
        line-height:80px;
        background:#07A725;
        text-align:right;
        box-sizing:border-box;
        padding-right: 12px;
        position: absolute;
        left:0;
        right:0;
        bottom:0;
    }
    .absflex_btn{
        display: inline-block;
        font-size: 13px;
        font-weight:bold;
        line-height:36px;
        padding:0 1.3em;
        background:#1D78B7;
        color:#fff;
        text-decoration: none;;
    }
    .absflex_btn:active{
        color:#0C5486;
    }
    .absflex_btn + .absflex_btn{
        margin-left:8px;
    }
    .absflex{
        position:absolute;
        left:0;
        right:0;
        top:42px;
        bottom:80px;
        overflow-y:auto;
    }
    .absflex ul{
        margin:0;
        padding:0;
        list-style: none;
    }
    .absflex ul li{
        font-size:13px;
        color:#ffffff;
        line-height:32px;
        text-indent:1em;
        border-bottom: 1px solid #ffffff;
    }
    .absflex ul li + li{
        margin-top:12px;
    }
</style>

效果如下：

效果如上，代码的主要部分就是absflex的top:42px;bottom:80px;通过top,bottom联合定位使用，就可以确定absflex div的自适应高度，它比flex差的就是，top，bottom是定值，所以说是不完善的flex纵向布局。

absflex_bottom通过left:0;right:0;实现width：100%的效果。

最后给个demo，体验一下这种absolute互斥定位实现的不完善flex布局：absolute同时设置top,bottom实现不完善flex布局。

上面代码中我们还使用了“+”相邻元素选择器，对于相邻元素选择器不熟悉的可以连接过去学习一下：css + 相邻元素选择器。

虽然我们通过absolute同时设置top，bottom实现的flex纵向弹性布局不是十分完善，但是呢，它在一定程度上有了纵向部分自适应高度的能力，还是可以简化我们很多布局的，掌握这个技能对于CSS布局的提高还是十分有好处的。