css 页脚固定到底部

来源：互联网发布：tor网络原理编辑：程序博客网时间：2024/05/01 21:58

页脚基本有两种呈现方式：

一、固定到窗口底部一直显示，不跟随滚动条滚动

说明：要达到这种效果方法很简单，只需要设定页脚div的 position:fixed;bottom:0; 即可。

但是如果缩小浏览器窗口，此页脚会与页面元素发生重叠，可以通过给页面内容部分设置padding-bottom留出空间，再把页脚背景或主体内容的背景设为不透明色或图片来解决，还可以利用z-index设置footer的层级。

html：

<body> <div class='header'></div> <div class='container'></div> <div class='footer'></div></body>

css：

.container{    padding-bottom:30px; /*需要 >= footer的height值*/}.footer{    height:30px;    position:fixed;    bottom:0px;    z-index:-1;}

二、当内容少于窗口高度时固定在底部，内容多于窗口高度时在所有内容下面

方法一：position法

html：

<body> <div class='header'></div> <div class='container'></div> <div class='footer'></div></body>

css：

body{    min-height:100%;    position:absolute; }.container{    padding-bottom: 30px; /*需要 >= footer的height值*/}.footer{    height:30px;    position:absolute;    bottom:0px;}

说明：

首先我们使用position+bottom这种最快速的方法把页脚固定到窗口底部，

因为要求在页面内容多于窗口高度时页脚在所有内容之下，需要滚动到最下端才能看到页脚，所以position属性使用了absolute，而没有使用不参与滚动fixed，到这里的设置在页面内容没超出窗口高度的情况下显示的很好，

但是absolute的定位是相对于窗口底部的，如果正文内容过多，就会出现滚动条，absolute定位会参与滚动，从而出现一种页脚也跟着跑了的感觉。

方法中我们把整个body文档也脱离正常的文档流，从而跟.footer同层，就可以顺序排到文档内容最后了。

但是这种方法又导致当页面内容过少时.footer没有固定到底端，所以还需要设置body的min-height:100%，.footer就到最底端了，

但有一个非常隐藏却需要注意的css 属性box-sizing，一般浏览器默认值为content-box，这也是w3c的标准，该值下元素的宽高不包含内外边框和边距的值，也就是说body的min-height：100%如果内容足够会显示到窗口的最底端，这样会与用bottom定位到底端的.footer发生重叠，

因此又有了最后一个设置：把body内装有页面内容的.container元素留一个padding-bottom的空间不写内容留给.footer去显示。

至此大功告成~~

如果你的页面设计是以box-sizing:border-box为基础的，上面的方法依然可以使用，只需css做如下变更：

body{    box-sizing:border-box;    min-height:100%;    position:absolute;     padding-bottom: 30px; /*需要 >= footer的height值*/}.footer{    height:30px;    position:absolute;    bottom:0px;}

方法二：负margin法

html：

<body>    <div class='container'></div>    <div class='footer'></div></body>

css：

.container {    box-sizing:border-box;     min-height:100%;    padding-bottom:30px; /* 需要 >= footer的height值 */ } .footer {    margin-top: -30px; /* footer高度的负值 */    height: 30px;}

说明：

该方法的使用前提是：

1、整个body必须分为两大块，如上html代码结构，一块正文内容（顶部导航栏可以放到里面写），一块页脚。

2、如果必须增加与.footer的同级的元素，则这个元素必须不增加正常文档流脱的高度，可以使该元素脱离文档流。

方法一个人看来理解起来比较绕，而且让body脱离文档流也可能会出现意料外的问题。

这种方法不破坏文档流，所有元素都是顺序定位的，因此直接就符合了“当内容多于窗口高度时页脚显示在所有内容最下面”的要求，

所以解决的就是当文档内容少于窗口高度时如何固定页脚到最底端的问题了。

该方法的主要思路就是把文档分为两部分，把页脚往上全部归为一部分，页脚为一部分，把.footer往上的所有内容设置为高度100%，然后留个内补不写内容用来放.footer，而.footer使用了负的margin来代替position从而移动元素，把margin-top设置成自身高度的负值，就完成任务了。详细理解如下：

在顺序布局的情况下要想页脚显示在最下面，首先想到的就是上面的元素都已经把空间占满了，所以给.container设置了min-height：100%，但是100%的高度会占满窗口，.footer会被挤到窗口下面需要移动滚动条才能看到的地方，

我们需要手动的把.footer往上移一个自身height的高度，所以用到了margin-top，大家都知道margin是一个元素的外边距，而页面布局中区分每个元素的正是外边界，下一个元素的开始位置是位于上一个元素外边距的结束处之后的，而把margin设为负值，是把外边距往回收，就意味着下一个元素可以一直叠到我收回的边界的位置（这种方法跟改变文档流移动元素的效果类似，但并没有破坏文档流），所以要把.footer往上移，可以设置margin-top为负的自身高度值。

然后要在.container中留出一个padding-bottom的内补不写内容，空间就是等于或大于.footer的高，留给.footer显示。

其中还给.container设置了盒模型属性box-sizing：border-box，该值是IE的盒模型，元素的宽高会包含内边距和外边距，这样便于给高度100%的.container调整padding-bottom而给.footer留空间。

如果不想使用box-sizing：border-box，（浏览器一般默认为content-box）则可以在.container外包裹一个div：

html：

<body>    <div class='wrap'>        <div class="container"></div>    </div>    <div class='footer'></div></body>

css：

.wrap{ min-height:100%; }.container {    padding-bottom:30px; /* 需要 >= footer的height值 */ } .footer {    margin-top: -30px; /* footer高度的负值 */    height: 30px;}

0 0