zoukankan      html  css  js  c++  java
  • 实现页脚固定及随内容向下移动

    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>
  • 相关阅读:
    html笔记3
    html笔记2
    绝望
    HTML中盒子模型
    HTML中visibility:hidden 和 display:none 的区别及实例?
    伪类选择器hover的用法实例
    CSS文本的用法及CSS字体的用法 综合应用
    CSS选择器的分类
    关于CSS的使用方式
    HTML关于表单
  • 原文地址:https://www.cnblogs.com/sarah-wen/p/10874214.html
Copyright © 2011-2022 走看看