Sticky footers 粘性页脚布局

来源：互联网发布：matlab读取txt数据画图编辑：程序博客网时间：2024/05/02 02:30

Stacky footers 可以译为粘性页脚，粘在底部的意思。可以理解为固定页脚，将页脚固定在底部。

示意图：
这里写图片描述

需求：1、在内容未撑满页面时，footer固定在底部
2、在内容超出页面时，footer随着页面的变大而往下移动，也保持在页面底部。

实现的思想：
    1、header、body、footer都是页面的一部分，page.height = header.height + body.height + footer.height
    2、footer保持在页面底部，且大小不变，那么header.height + body.height = page.height-footer.height 。
    3、header,body本身在文档流之内，因此他们的内容可以随意变化，我们将他们看成一个整体，使用一个元素wrapper将他们包裹起来。 wrapper.height = page.height-footer.height
    4、footer的高度如何知道呢，可以根据设计的时候的设置去推算。

由以上看以看出，只需要实时计算出wrapper的高度就可以将footer的位置固定。然而page.height也是可变的，那怎么才能实现呢？这时候就需要使用视窗相对单位。然而有了相对视窗单位的page.height，那怎样动态计算出wrapper.height呢？CSS3中设置了一个计算的calc()函数，浏览器会自动计算。

最后得到我们的设计：
这里假设footer的高度为50px;

.wrapper {    min-height: calc(100hv - 50px);//因为大小可变，因为使用min-width}

注：由于calc()的兼容性问题，移动端设备大多都不支持。

因为根据这种思想，我们来改进一下：
1、将wrapper设置为100%.让它随页面变化而变化。再设置它的padding-bottom值，让他内容往内缩，以免被footer遮挡。

.wrapper {    width: 100%;    height: 100%;    padding-bottom: 50px;}

2、由于wrapper已经占满了本身的页面，footer会将页面继续撑开，因此想要页面保持原本大小，那应该设置margin-top为负，将它网上移，移的距离看具体设置和需求。

.footer {    margin-top: -50px;}

同样能够实现，并且兼容性很好。

什么是视窗？移动端Viewport 视窗（视口）
什么是视窗单位？视窗单位 vs 百分比单位
什么是calc() CSS3–calc()

0 0