css sticky footer

来源：互联网发布：二十八星宿正确算法编辑：程序博客网时间：2024/05/22 11:52

css sticky footer的原理：

。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css3/css-secrets/sticky-footers.html © w3cplus.com

如果页面内容不够长的时候，页脚块始终在视窗的底部。如果页面内容足够长的时候，超过一屏的长度，页脚块会被内容向下推送。

这里是测试的demo；建议在调试手机端进行查看

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <title>Title</title>    <style>        body{            position: relative;            width: 100%;            height: 100%;        }        * {            margin: 0;            padding: 0;        }        .main {            width: 100%;            height: 100%;            position: fixed;            top: 0;            left: 0;            overflow: auto;            z-index: 100;            background: rgba(255, 221, 226, 0.8);        }        .f-clear:before,.f-clear:after{            content: '';            display: block;            clear: both;            overflow: hidden;            font-size: 0;            height:0;            line-height:0;        }        .main-wapper{            min-height:100%;        }        .main-detail{            margin-top:64px;            padding-bottom: 64px;
            /*是为了撑开关闭按钮的高度，这样就不会覆盖文字的内容，当内容多余的时候，依然定位在底部*/        
            /*这里的内边距是一定要的，为的就是下面的关闭按钮,       
            这里设置的数值也就是下面的按钮要设置的外边距高度*/    
    }   
     .main-detail p{        
          font-size:16px;      
         }     
   .main-close{
        position: relative;    
        width: 32px;    
        height: 32px;    
        font-size:32px;   
         text-align: center;   
         margin:-64px auto 0 auto;   
         /*这里关闭按钮的外边距设置的高度就是上面设置的内边距高度*/   
         clear: both;   
     }   
 </style>
</head>
<body>
<div class="main">  
  <!--这里是内容区--> 
   <div class="main-wapper f-clear">   
     <div class="main-detail">   
         <p>埃菲尔铁塔高300米，天线高24米，总高324米，铁塔是由很多分散的钢铁构件组成的——看起来就像一堆模型的组件。钢铁构件有18038个，重达10000吨，施工时共钻孔700万个，使1.2万个金属部件，用铆钉250万个。除了四个脚是用钢筋水泥之外，全身都用钢铁构成，共用去熟铁7300吨。塔分三楼，分别在离地面57.6米、115.7米和276.1米处，其中一、二楼设有餐厅，第三楼建有观景台，从塔座到塔顶共有1711级阶梯。</p>     
         <p>埃菲尔铁塔高300米，天线高24米，总高324米，铁塔是由很多分散的钢铁构件组成的——看起来就像一堆模型的组件。钢铁构件有18038个，重达10000吨，施工时共钻孔700万个，使1.2万个金属部件，用铆钉250万个。除了四个脚是用钢筋水泥之外，全身都用钢铁构成，共用去熟铁7300吨。塔分三楼，分别在离地面57.6米、115.7米和276.1米处，其中一、二楼设有餐厅，第三楼建有观景台，从塔座到塔顶共有1711级阶梯。</p>            <!--<p>埃菲尔铁塔高300米，天线高24米，总高324米，铁塔是由很多分散的钢铁构件组成的——看起来就像一堆模型的组件。钢铁构件有18038个，重达10000吨，施工时共钻孔700万个，使1.2万个金属部件，用铆钉250万个。除了四个脚是用钢筋水泥之外，全身都用钢铁构成，共用去熟铁7300吨。塔分三楼，分别在离地面57.6米、115.7米和276.1米处，其中一、二楼设有餐厅，第三楼建有观景台，从塔座到塔顶共有1711级阶梯。</p>-->            
         <!--可以把上面的注释的p标签  来回切换显示隐藏，就可以看到变化，也就是底部的关闭按钮是一直在底部的-->   

         <p>jkghiugcdishdsjfosdfdfuoguf</p>     
   </div>   
 </div>   
 <!--这里是关闭按钮--> 
   <div class="main-close">      
         ╳    </div>
</div>
</body>
</html>

它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css3/css-secrets/sticky-footers.html © w3cplus.co

阅读全文

1 0