實現頁腳固定及隨內容向下移動

時間 2019-11-13

標籤實現頁腳固定內容向下移動欄目無線简体版

原文原文鏈接

1. css

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

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

相關標籤/搜索