CSS + DIV 让页脚始终保持在页面底部

来源：David's Blog http://www.DavidQiu.com/

文章链接：http://blog.davidqiu.com/post/2013-06-17/40051753968

相关参考：

http://www.cnblogs.com/chenyuming507950417/p/4003651.html

http://www.cnblogs.com/ahjesus/archive/2011/11/26/2263986.html

下面是David博客的原文

博主研究了两天多，终于利用 CSS+DIV 让页脚始终在页面的最底部了 T T

1、利用 bottom 属性？

在实践之前，很容易联想到用 CSS 里面的 bottom 属性让页脚在最下面，可是这个是行不通的。如果使用了如下方法：

footer
{bottom: 0px;
}

我可以很诚实地告诉你，写了根没写压根就没区别。因为版面默认用的是 “position: relative;”，这会让版面从上至下地排布，而不能够独立地让 footer 始终在页面的最底部。

position: fixed？

那么自然就会想说，那如果用“position: fixed;”属性呢？

footer
{position: fixed;bottom: 0px;
}

这个也是不行的，因为“fixed”会让 div 相对浏览器，而非页面。那么出现的情况将是无论怎么移动页面，始终都有一个 footer 在浏览器的底部，不甚美观。

position: absolute？

那么又想了，如果用“position: absolute”呢？

footer
{position: absolute;bottom: 0px;
}

这个也是不行的。用了这个属性，会有一种初始化的效果，让 footer 一开始就在浏览器的最底部，然后你拉动页面，它不会落到页面最低部，而是上去了。实际上就是与其他网页内容产生了重叠。这个也是绝对不允许的。

2、解决方法

在解决的时候，我查了相当多的资料。如果用纯 CSS 的话，似乎都指向一种叫 Sticky Footer的方法。不过网上的基本都是抄来抄去，只有代码，没有解释什么的，我就不吐嘈了。

原理解析

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

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

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

body, html
{height: 100%;
}

一个值得关注的是，如果我们用的是 ASP.NET 框架，因为它是基于 form 的，所以仅仅设置 body 和 html 还不够，还要设置 form 的相应属性：

form
{height: 100%;
}

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

*
{margin: 0;padding: 0;
}

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

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

可能看到上面的第 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;
}

by: David Qiu.

再次对原文作者表示感谢。在此收藏，只是当做笔记。

转载于:https://www.cnblogs.com/huashanqingzhu/p/4379125.html

CSS + DIV 让页脚始终保持在页面底部相关推荐

CSS + DIV 让页脚始终底部
原文:CSS + DIV 让页脚始终底部一前言经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部, ...
php架在底部页面,页脚始终保持在页面底部的网页布局方法
页脚始终保持在页面底部的网页布局方法导语:用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.下面就由百分网小编为大家介绍一下 ...
DIV+CSS:页脚永远保持在页面底部
页脚永远保持在页面底部有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...
JS实现让页脚一直固定在页面底部
2019独角兽企业重金招聘Python工程师标准>>> JS实现页脚在浏览器可视范围内始终置底. 如下图所示: 代码如下: <!DOCTYPE html> <htm ...
在html用div怎样写页脚,使用div+CSS将页脚始终控制在页面最下方的方法
tml和body的高度并不一定相同,在内容少的时候,body的高度要小于html,当然这只会出现在body中的内容所占的空间高度小于浏览器的视口高度的时候,此时html的高度大于body的高度.网页中 ...
html页脚位置调整,将页脚始终控制在页面最下方的几种方法
html和body的高度并不一定相同,在内容少的时候,body的高度要小于html,当然这只会出现在body中的内容所占的空间高度小于浏览器的视口高度的时候,此时html的高度大于body的高度.网页 ...
使用css定位--让foot层始终保持在页面底部
思路是将foot层绝对定位到底部, 蓝色字体为重要代码贴代码: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional ...
如何确保页脚始终位于页面底部？
在尝试创建精美的网站时,防止页脚在页面上浮动非常重要.内容较短的页面可能会遇到此问题,但只需几行 CSS 即可轻松修复.假设您的 HTML 看起来像下面的代码片段,这里有两种现代方法可以确保页脚始终位 ...
html页脚显示不出来,CSS实例:让页脚保持在未满屏页面的底部
CSS实例:让页脚保持在未满屏页面的底部互联网发布时间:2008-10-17 19:20:27 作者:佚名我要评论在内容不超过一屏的情况下,当浏览器窗口变小那行页脚文字会跟着向上浮 ...

CSS + DIV 让页脚始终保持在页面底部

CSS + DIV 让页脚始终保持在页面底部相关推荐

最新文章

热门文章