CSS布局之Stickyfooters

在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

这里说2个实现的原理

因为兼容性问题，请在高端浏览器或手机端使用~

1.使用CSS取值函数calc()

注意运算符的前后一定要➕空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;}
        header,footer{
            height: 50px;
            color: red;
            background: #000;
        }
        div{
            background: blue;
            min-height: calc(100vh - 100px);
        }
    </style>
</head>
<body>
    <header>头部</header>
    <div>内容部分</div>
    <footer>底部</footer>
</body>
</html>

效果就不展示了，自己建一个html运行一下吧…

2.使用flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;}
        body{
            display: flex;
            flex-direction: column;
            min-height: 100vh;   //给body一个最小的高度
        }
        header,footer{
            height: 50px;
            color: red;
            background: #000;
        }
        div{
            background: blue;
            flex:1;  //头部底部固定，中间占据剩余空间
        }
    </style>
</head>
<body>
    <header>头部</header>
    <div>内容部分</div>
    <footer>底部</footer>
</body>
</html>

OVRE

2016-12-08