007stickyfooter_manta007-CSDN博客

本文链接：https://blog.csdn.net/Manta__/article/details/104846917

什么是stickyfooter
-经典的 “粘连”footer布局。
-我们有一块内容<main>.
-当<main>的高度足够长的时候，<footer>应该紧跟在<main>元素的后面。
-当<main>元素比较短的时候 (比如小于屏幕的高度)，我们期望这个<footer>元素能够“粘连” 在屏幕的底部

<style type="text/css">
   *{
    margin:0;
    padding: 0;
   }
   html,body{
    height: 100%;//继承视窗高度
    
   }
   #wrap{
    min-height: 100%;//最小高度
    background-color: pink;
    text-align: center;
   }
   #wrap .main{
    padding-bottom: 50px;//内边距去除与footer的重叠
   }
   #footer{
    height: 50px;
    line-height: 50px;
    background-color: deeppink;
    text-align: center;
    margin-top: -50px;//把footer提升50px
   }
  </style>
  <body>
  <div id= "wrap">
   <div class="main">
    main <br />
    main <br />
    main <br />
    main <br />
    main <br />
    main <br />
    main <br />
    main <br />
    main <br />
    main <br />
    main <br />
    main <br />
    main <br />
    main <br />
    main <br />
    main <br />
    main <br />
   
   </div>
  </div>
  
  <div id="footer">
   footer
  </div>
 </body>