css absolute同时设置top,bottom确定div的高度
2017-02-13 22:11

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>

absolute.png

效果如上。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>

效果如下:

absolute2.png

效果如上,代码的主要部分就是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布局的提高还是十分有好处的。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(4396)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1