zoukankan      html  css  js  c++  java
  • 如何将页脚固定在页面底部

    方法一:

    HTML:

    <div id="container">
    <div id="hearder">页头区域</div>
    <div id="page" class="clearfix">页面内容</div>
    <div id="footer">页脚</div>
    </div>

    CSS:

    html,body{
    margin:0;
    padding:0;
    height:100%;
    }
    #container{
    min-height:100%;
    height:auto !important;
    height:100%;
    position:relative;
    }
    #header{
    background:#ff0;
    padding:10px;
    }
    #page{
    width:960px;
    margin:0 auto;
    padding-bottom:60px;/*等于footer高度*/
    }
    #footer{
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;
    background:#6cf;
    clear:both;
    }

    方法二:

    HTML:

    <div id="container">
    <div id="page">页面内容</div>
    </div>
    <div id="footer">页脚</div>

    CSS:

    html,body{
    height:100%;
    margin:0;
    padding:0;
    }
    #container{
    min-height:100%;
    height:auto !important;
    height:100%;
    }
    #page{
    padding-bottom:60px;/*高度等于footer高度*/
    }
    #footer{
    position:relatvie:
    margin-top:-60px;
    height:60px;
    clear:both;
    background:#c6f;
    }

    参考:Pure CSS:Sticky Footer

    方法三:

    HTML:

    <div id="container">
    <div id="page">页面内容</div>
    <div class="push"></div>
    </div>
    <div id="footer">页脚</div>

    CSS:

    html,body{
    height:100%;
    margin:0;
    padding:0;
    }
    #container{
    min-height:100%;
    height:auto !important;
    height:100%;
    margin:0 auto -60px;
    }
    .push,#footer{
    height:60px;
    clear:both;
    }
    #footer{
    background:#f6c;
    }

    方法四:

    HTML:

    <div id="header">页头</div>
    <div id="page" class="clearfix">页面内容</div>
    <div id="footer">页脚</div>

    CSS:

    *{
    margin:0;
    padding:0;
    }
    .clearfix:before,.clearfix:after{
    content:"";
    display:table;
    }
    .clearfix:after{
    clear:both;
    }
    .clearfix{
    zoom:1;
    }
    #footer{
    height:60px;
    background:#fc6;
    width:100%;
    }
  • 相关阅读:
    常用英语1000句
    TXT EXPLORER
    窗体美化
    C++ Code_StatusBar
    C++ Code_Slider
    C++ Code_ScrollBar
    C++ Code_ImageList
    C++ Code_HotKey
    C++ Code_animateCtrl
    C++ CheckMenuItem
  • 原文地址:https://www.cnblogs.com/ecosu/p/4323288.html
Copyright © 2011-2022 走看看