利用box-flex实现 dom元素位置页面底部

问题:

总是有这样的需求，就是页面上某部分要位于页面的最底部，此“最底部”要求：（1）当页面上内容不足一屏的时候，在最底部显示（2）当页面上内容不止一屏的时候，也就是有垂直滚动条的时候，要在内容的最后显示

最容易想到的定位方法：

（1）position:absolute  

position:absolute;
bottom:0;
left:0

此种方法只能把该元素定位到第一屏的最底部，它并不会随着滚动条的出现跑到内容的最后面去。满足（1）不满足（2）

（2）position:relative

此种方法只能满足（2），不能满足（1），当然要满足（1）的话，可以配合使用js, 思路是利用JS计算屏幕高度，减去底部高度，设定除底部的其他元素的高度。

最简单的方法（需要支持CSS3的box-flex属性）：

关于box-flex的详细讲解请看：http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B/

利用box-flex属性就可以实现上面提到的需求，见下面的代码：

<style>
    
    .con{
        position: absolute;
        height: 100%;
        width: 100%;
        top:0;bottom: 0;left: 0;right: 0px
    }
    .wrap{
        
        min-height: 100%;
        width: 100%;
        position: relative;
        
        /**父元素display设置为box**/
        display:-moz-box; 
        display:-webkit-box; 
        display:-o-box; 
        display:box;

        /**父元素的布局是垂直方向**/
        -moz-box-orient:vertical; 
        -webkit-box-orient:vertical; 
        -o-box-orient:vertical; 
        box-orient:vertical; 

        -moz-box-align:center; 
        -webkit-box-align:center; 
        -o-box-align:center; 
        box-align:center; 

        -moz-box-pack:center; 
        -webkit-box-pack:center; 
        -o-box-pack:center; 
        box-pack:center;      
    }
    .main{
        background-color: blue;
        color: #fff;
        width: 100%;
         -moz-box-flex: 1; 
        -webkit-box-flex: 1; 
        box-flex: 1;
    }
    .footer{
        background-color: green;
        width:100%;
        height: 30px;
    }
    </style>
    <div class="con">
        <div class="wrap">
            <div class="main"></div>
            <div class="footer"></div>
        </div>
    </div>

这样，footer 就以30px的像素告诉一直位于页面的底部，并且满足（1），满足（2）

 

 

转载于:https://www.cnblogs.com/lilyimage/p/3333523.html