css 绝对底部

相信刚看到这个标题的小伙伴会觉得一脸懵逼：什么叫绝对底部呢？简单的说就是某块内容一直呈现在页面的底部，不会随着上层内容的改变而改变或者远离页面底部。

原因

某些情况中心内容过于空旷，原本应该显示在底部的内容跑到上面去了，页面呈现比较难看，例如，原先的页面应该是如下酱紫的：

原本设计的页面，填充的比较满

但是特殊情况下中间的内容部分比较少，不做css绝对底部的话页面就变成酱紫了：

底部跑上面去了

底部明显跑上面去了，而且留白比较大，不符合设计的初衷啊，设计肯定要求你改改改！那我们只好想个办法让底部真的一直在底部喽！

绝对底部效果图

可以这：

在底部，与主内容距离很长

也可以这样：

在底部，与主内容距离比较短

下面就是重点的代码部分啦

html代码

<div class="login_panel">        <header id="header" class="">
            我是页面开头，一直呈现在页面头部        </header><!-- /header -->
        <div class="loginInfo">
            <p>我是页面主体，呈现页面的主体内容，今天兴致大发，看了点《七月与安生》:</p>
            <h4>七月和安生</h4>
            <p>七月第一次遇见安生的时候，是十三岁的时候。</p>
            <p>新生报到会上，一大堆排着队的陌生同学。是炎热的秋日午后，明亮的阳光照得人眼睛发花。突然一个女孩转过脸来对七月说，我们去操场转转吧。女孩的微笑很快乐。七月莫名其妙地就跟着她跑了。</p>
        </div>
        <footer class="login-bottom">
            我是底部，想一直呈现在页面底部，显示一些提示信息或公司信息合作伙伴等等……        </footer>
    </div>

css代码

    body {        margin: 0 auto;        padding: 0;        width: 500px;
    }     header{            padding-top: 20px;
    }    .login_panel {        position: absolute;        height: 100%;        width: 500px;
    }    
    .loginInfo {        margin-bottom: -50px;        min-height: 225px;        height: 80%;        color: #988e8e;
    }    
    .login-bottom {        height: 50px;
    }

这么简单？bingo,就是so easy,轻松解决。

其实需要注意的就三点：
1、块包含脱离文档流：看login_panel的positon属性
2、loginInfo的margin-bottom的负值和login-bottom 得height值相等
3、根据窗口和内容的高度设置loginInfo的高度，不然会出现难看的滚动条，哈哈~~

作者：萌_希
链接：https://www.jianshu.com/p/b9fbd55d1801