实现页脚固定及随内容向下移动

1. 

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8" />
    <style type="text/css">
        html,body{
            height: 100%;
            margin: 0;
            padding: 0;
        }
        header{
            height: 100px;
            margin-bottom: -100px;
        }
        .page{
            box-sizing: border-box;
            min-height: 100%;
            padding-top: 100px;
            padding-bottom: 200px;  
        }
        footer{
            height: 25px;
            margin-top: -25px;
        }
    </style>
</head>
<body>
    <header>头部</header>
    <section class="page">hkjjjjjjjjjjjjjjjjjddddddddddddddddddd哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈给哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</section>
<footer>页脚</footer>
</body>
</html>

2. 

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8" />
    <style type="text/css">
        html,body{
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .container{
            display: flex;
            height:100%;
            flex-flow: column;
        }
        header{
            flex:0 0 auto;
        }
        .page{
            flex:1 0 auto;
        }
        footer{
            flex:0 0 auto;
        }
    </style>
</head>
<body>
<div class="container">
    <header>头部</header>
    <section class="page">内容</section>
    <footer>页脚</footer>
</div>
</body>
</html>

 

posted @ 2019-05-16 10:51  sarah_wen  阅读(887)  评论(0)  编辑  收藏  举报