CSS + DIV 让页脚始终底部

时间 2019-12-08

标签 css div 页脚始终底部栏目 CSS 繁體版

原文原文链接

原文地址：http://blog.davidqiu.com/post/2013-06-17/40051753968css

解决方法html

在解决的时候，我查了至关多的资料。若是用纯 CSS 的话，彷佛都指向一种叫 Sticky Footer的方法。不过网上的基本都是抄来抄去，只有代码，没有解释什么的，我就不吐嘈了。浏览器

原理解析app

这种方法的原理很简单，用到了 2 个属性：min-height 和 margin。框架

其中，min-height 都有个很奇特的属性值：100%。这个属性值是指当前浏览器窗口的高度，实际上就是能显示的最大高度（一个屏幕的高度）了。那么天然能够联想到，若是将内容部分设成“min-height: 100%”，就可以将内容部分占有一个屏幕的高度，那么页脚起码会在屏幕的外面。只要稍加改进，便能融入 Header、Content、Footer 这三个部分，并使得 Footer 起码在屏幕的最底部，并且当内容长度增长时，会在页面的最后面，而不至于遮挡内容。post

但是要注意的是，“100%”的这个属性对于“height”或者“min-height”来讲有点奇怪，它在使用以前貌似要对“100%”的定义进行初始化。而咱们知道，“html”这个结点是沾满一个屏幕的，那么就要先写这样的内容：ui

 
        body, html 
       
        { 
       
          height: 100%; 
       
        }

一个值得关注的是，若是咱们用的是 ASP.NET 框架，由于它是基于 form 的，因此仅仅设置 body 和 html 还不够，还要设置 form 的相应属性：spa

 
        form 
       
        { 
       
          height: 100%; 
       
        }

而为了页眉与页脚紧贴浏览器边框，咱们还要设置相关的 margin 与 padding 为 0，以防止空隙的出现。而为了简单起见，就对全局全部的容器都设置这样的一个默认值吧。code

 
        * 
       
        { 
       
          margin: 0; 
       
          padding: 0; 
       
        }

好了，到了这里就能够放心地去用“min-height: 100%;”了。orm

那么怎么解决在内容不多的时候，页脚可以显示在浏览器的最底部，而不是什么状况都被置于一个屏幕的高度以外呢？

可能看到上面的第 2 个我说的要使用的属性，你们就大概明白了。对，就是用 margin 这个属性。不过要声明的一点是，下面的方法用到了一些不太符合规范的方法，就是加多了一个空 div 用做显示格式定制，而其自己不起任何做用。

先看看网页的 html 文原本了解一下框架吧：

 
        <div class="Wrapper"> 
       
          <div class="Header"></div> 
       
          <div class="Content"></div> 
       
          <div class="FooterPush"></div> 
       
        </div> 
       
        <div class="Footer"></div>

可见，页眉与内容都被一个叫“Wrapper”的容器包着，而后在他们后面有个叫“FooterPush”的东西，其实这个就是我以前说的仅用于控制显示格式的空 div 了。而后，Footer 是置于全部内容以外的。

而后咱们这样思考：若是 FooterPush 的高度与 Footer 相同，而后 Footer 有一个“margin-top”的属性，它的值是 Footer 的高度的负值，即例如 Footer 的高度是 120px，而后：

 
        .Wrapper .FooterPush 
       
        { 
       
          height: 120px; 
       
        } 
       
        .Footer 
       
        { 
       
          margin-top: -120px; 
       
          height: 120px; 
       
        }

那么发生的状况将会很是神奇，实际上就是 Footer 恰好就覆盖在 FooterPush 的上面了。那么这个时候，咱们只要将 Wrapper 的高度设为“100%”，这样全部的东西就至少可以在一个屏幕内现实完毕了。

这样，就可以达到当内容少时，Footer 最高可以在一个屏幕的最底部显示；而当内容比较长的时候，Footer 可以很乖巧地在全部内容的后面，而不至于遮挡内容。

OK，大工告成了吧！那我就贴个完整些的代码吧。

完整代码

Html：

 
        <body> 
       
        <form> <!-- 若是用的是 Asp.Net 就可能会有这个结点 --> 
       
          <div class="Wrapper"> 
       
            <div class="Header"></div> 
       
            <div class="Content"></div> 
       
            <div class="FooterPush"></div> 
       
          </div> 
       
          <div class="Footer"></div> 
       
        </form> 
       
        </body>

CSS:

 
        * 
       
        { 
       
          margin: 0; 
       
          padding: 0; 
       
        } 
       
        html, body, form 
       
        { 
       
          height: 100%; 
       
        } 
       
        .Wrapper 
       
        { 
       
          min-height: 100%; 
       
        } 
       
          .Wrapper .FooterPush 
       
          { 
       
            height: 120px; /* Footer 的高度 */ 
       
          } 
       
        .Footer 
       
        { 
       
          clear: both; /* 清除浮动元素格式 */ 
       
          position: relative; 
       
          margin-top: -120px; /* Footer 高度的负值 */ 
       
          height: 120px; 
       
        }