A CSS Sticky Footer——CSS底部固定布局分析

摘自：http://paranimage.com/css-sticky-footer/

先说我们为什么会使用到这个CSS底部固定布局解决方案:

有这种情况：当正文内容很少时，底部位于窗口最下面。但当改变窗口高度时，会出现重叠问题。如下所述

当做一个页面时，如果页面内容很少，不足于填充一屏的窗口区域，按普通的布局，就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部，而留下了大量空白。

nonstickfooter CSS Sticky Footer: 完美的CSS绝对底部

对于追未完美的设计师来说，这是不美观的。网上有一些解决方案，但会出现当改变窗口高度时，底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度，但设计嘛，追求的就是尽善尽美。

overlapfooter CSS Sticky Footer: 完美的CSS绝对底部

下面是我找到的一个比较完美的方法，来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。

cssstickyfooter CSS Sticky Footer: 完美的CSS绝对底部

一、来自http://www.cssstickyfooter.com/using-sticky-footer-code.html的解决方法

<div id="wrap">
    <div id="main" class="clearfix">
        <div id="content">    </div>
        <div id="side">        </div>
    </div>
</div>
<div id="footer">  </div>

说明: 使用这个布局的前提，就是footer要在总的div容器之外，footer使用一个层，其它所有内容使用一个总的层。如果确实需要到添加其它同级层，那这个同级层就必须使用position:absolute进行绝对定位。

CSS代码: 下面是主要的CSS代码，让你的底部可以位于窗口的最下面:

html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {overflow:auto;padding-bottom: 150px;}  /* 必须使用和footer相同的高度 */
#footer {position: relative;
         margin-top: -150px;         /* footer高度的负值 */
         height: 150px;
         clear:both;
}

/*Opera Fix*/
body:before { content:"";    height:100%;    float:left;    width:0;    margin-top:-32767px;/}

<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->

说明: 需要注意的就是#main的padding值、footer的高度和负margin值，需要保持一致。

所有页面最好对IE6以下的版本和IE8进行条件注释，!IE 7指不是IE7的其他IE版本

就是这么简单，不过还没完。如果你的主体是使用悬浮布局，还得解决一些浏览器的兼容问题，这里使用的重点是为了Goolge Chrome。

对#main部份进行著名的Clearfix Hack:

.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}  /* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}         /* End hide from IE-mac */

注: 该方案测试于两栏悬浮布局，兼容各大主流浏览器，包括Google Chrome。

二、来自Ryan Faits的方法

 <html>
        <head>
            <link rel="stylesheet" href="layout.css" ... />
        </head>
        <body>
            <div class="wrapper">
                <p>Your website content here.</p>
                <div class="push"></div>                 <!---->
            </div>
            <div class="footer">
                <p>Copyright (c) 2008</p>
            </div>
        </body>
</html>

CSS代码

* {margin: 0;    }
html, body {height: 100%;    }
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;               /*和push的高度一致*/
}
.footer, .push {height: 4em;    }  /*和wrapper的负边距一致*/

说明：主要思路是在wrapper层下面多加一个push层，并让wrap div的下负间距和push div以及footer的高度一致

转载于:https://www.cnblogs.com/JoannaQ/archive/2013/02/10/2909889.html

A CSS Sticky Footer——CSS底部固定布局分析

猜你喜欢