Sticky footer布局

最新推荐文章于 2024-08-29 01:06:04 发布

飞扬_柳絮

最新推荐文章于 2024-08-29 01:06:04 发布

阅读量515

点赞数

分类专栏： Css 文章标签：布局

本文链接：https://blog.csdn.net/tjcjava/article/details/77447812

版权

Css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

实际需求：
　　页面内容不足满屏时 footer在底部，超过满屏时footer在内容末尾

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style>
            *{margin: 0; padding: 0; font-size: 24px;}
            html,body{
              width: 100%;
              height: 100%;
            }
            .warp{/*第一步：最外层盒子,最小高度一屏,内容超过一屏时随内容扩展*/
              height: auto;
              min-height: 100%;
              background-color: #CDDC39;
            }
            .content{/*第二步：设置和footer相同的高度*/
              padding-bottom: 150px;
              word-wrap: break-word;/*css hack：设置div宽度来使内容换行,对于连续的数字和英文则无效(遇到中文即会换行)*/
            }
            .footer{/*第三步：设置和footer的高度*/
              position: relative;
              margin-top: -150px;
              height: 150px;
              word-wrap: break-word;
              background-color: #8BC34A;
            }
        </style>
     </head>
     <body>
         <div class="warp">
             <div class="content">
                  contentcontentcontentcontentcontentcontentcontentcontentcontent
                  contentcontentcontentcontentcontentcontentcontentcontentcontent
                  contentcontentcontentcontentcontentcontentcontentcontentcontent
             </div>
          </div>
          <div class="footer">footerfooterfooterfooterfooterfooterfooterfooter</div>
     </body>
  </html>