css sticky footer

最新推荐文章于 2022-10-08 17:33:44 发布

yyrSun

最新推荐文章于 2022-10-08 17:33:44 发布

阅读量754

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/yyjourney/article/details/78093167

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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