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

佚名 6年前 (2019-05-16) 随笔 684人围观抢沙发百度已收录

<!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>

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

<!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>