Sticky footer布局

最新推荐文章于 2023-02-13 20:45:00 发布

原创最新推荐文章于 2023-02-13 20:45:00 发布 · 560 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#布局

Css 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种使得页面内容不足满屏时底部元素固定于屏幕底部，而当内容超过满屏时底部元素能跟随内容显示在末尾的网页布局方法。通过CSS技巧实现不同情况下的响应式布局效果。

实际需求：
　　页面内容不足满屏时 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>