1. 问题描述

将footer保持在视觉窗口的底部是常见的需求。当页面的内容主体高度较大（超出屏幕可视区域的高度）时，footer元素直接跟在内容后面即可。但是，当一个 HTML 页面包含少量的内容时，footer元素就会坐落在页面的中间，在下面留下空白，这看起来很糟糕，尤其是在大屏幕上。
如下图：

2. 解决方案

我们先给出基础的页面代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>footer</title><style>* {box-sizing: border-box;text-align: center;margin: 0;padding: 0;}header, footer {color: #FFF;padding: 20px;}header {background-color: #7BE0AD;}main {padding: 20px;border: 2px dashed red;}footer {background-color: #457B9D;}</style>
</head><body><div id="container"><header><h1>我是header</h1></header><main><p>我是内容（内容不是很长）</p></main><footer><p>我是footer &copy;码飞_CC</p></footer></div>
</body></html>

显示效果如下：

2.1 使用position属性实现（兼容较老的浏览器）

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>footer</title><style>* {box-sizing: border-box;text-align: center;margin: 0;padding: 0;}html, body {height: 100%;  /* 1. 需要将页面的高度设置成浏览器可视区域的高度 */}#container {min-height: 100%; /* 2. 需要将容器的高度设置成100% */position: relative; /* 3. 容器的position设置为relative，给子元素定位提供基点 */}header, footer {color: #FFF;padding: 20px;}header {background-color: #7BE0AD;}main {padding: 20px;border: 2px dashed red;}footer {position: absolute;bottom: 0; /* 4. 设置页脚position为absolute之后，再将其bottom值设为0，即可使其处于页面的底部 */width: 100%;background-color: #457B9D;}</style>
</head><body><div id="container"><header><h1>我是header</h1></header><main><p>我是内容（内容不是很长）</p></main><footer><p>我是footer &copy;码飞_CC</p></footer></div>
</body></html>

显示的效果如下：

几个注意点：

HTML和body标记必须设置为 height: 100% ;，这保证我们后面能够设置容器 div的百分比高度。
容器 div具有一个 min-height: 100% ;，这将确保它在几乎没有任何内容的情况下，也可以保持屏幕的完整高度。容器 div也被设置为 position: relative;，这使我们能够绝对定位其子元素。
页脚容器设置为绝对定位，并且bottom:0;。宽度设置为100%，width: 100%;这样页脚才能撑开为可视区域的宽度。
这里有个小问题，就是当窗口缩得特别小的时候，footer元素会在容器div上，使得内容被覆盖了。解决方法是设置容器div的padding-bottom或border-bottom的值为footer元素的高度（这里使用margin-bottom是没有效果的）。

2.2 使用Flex实现

CSS代码：

* {box-sizing: border-box;text-align: center;margin: 0;padding: 0;
}
html, body {height: 100%;
}
#container {min-height: 100%;display: flex; /* 容器为flex布局 */flex-direction: column; /* 方向为纵向，保持正常的从上到下文档流 */
}
header, footer {color: #FFF;padding: 20px;
}
header {background-color: #7BE0AD;
}
main {padding: 20px;border: 2px dashed red;
}
footer {margin-top: auto; /* 设置footer的上外边距为auto */background-color: #457B9D;
}

效果跟使用position的方法一样，但是更加简洁完美，没有position小节中几个注意点部分的第4条的那个问题。

2.3 使用Grid实现

* {box-sizing: border-box;text-align: center;margin: 0;padding: 0;
}
html, body {height: 100%;
}
#container {min-height: 100%;display: grid; /* 容器为grid布局 */ grid-template-rows: auto 1fr auto;
}
header, footer {color: #FFF;padding: 20px;
}
header {background-color: #7BE0AD;
}
main {padding: 20px;border: 2px dashed red;
}
footer {background-color: #457B9D;
}

效果如下：

使用grid实现需要注意兼容性问题，从效果图可以看到，它的实现方式是用特殊的网格单元 fr，使main元素撑满剩余空间来实现的。

参考内容：

How to keep footers at the bottom of the page
Keep the Footer at the Bottom: Flexbox vs. Grid
Flex相关的内容可参考MDN文档-Flex
Grid相关的内容可参考MDN文档-Grid

如何将页脚（footer）保持在页面底部相关推荐

php架在底部页面,页脚始终保持在页面底部的网页布局方法
页脚始终保持在页面底部的网页布局方法导语:用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.下面就由百分网小编为大家介绍一下 ...
JS实现让页脚一直固定在页面底部
2019独角兽企业重金招聘Python工程师标准>>> JS实现页脚在浏览器可视范围内始终置底. 如下图所示: 代码如下: <!DOCTYPE html> <htm ...
DIV+CSS:页脚永远保持在页面底部
页脚永远保持在页面底部有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...
php 底部页面层,html 设置页脚div一直在页面底部
先上代码 //这部分的div的 position 是 fixed 解析: 1.先设置的 height 为 100%: 2.设置 body 的position 为 absolute,因为它里面的 div ...
html 在div 底部显示不出来,html 设置页脚div一直在页面底部
先上代码 //这部分的div的 position 是 fixed 解析: 1.先设置的 height 为 100%: 2.设置 body 的position 为 absolute,因为它里面的 div ...
CSS + DIV 让页脚始终保持在页面底部
来源:David's Blog http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...
html 停留页面底部,HTML 中使 footer 始终处于页面底部
通常在页面中,需要使页脚 footer 部分始终处于底部.当页面高度不够 100% 时, footer 处于页面最底部,当页面内容高于 100% 时,页脚元素可以被撑到最底部. 方法一:绝对定位旋转 ...
html中如何在页面底部增加,HTML中footer固定在页面底部的若干种方法
如果主体内容过短不足以支撑浏览器时,footer会上移,非常影响页面,算是一个大bug了,搜过很多种方法现整理一下footer固定在第的若干种方法,供以后参考.(欢迎大家积极补充.) 以上布局为给个人 ...
如何将footer标签固定在底部_让footer固定在页面底部
最近做了几个触屏版页面,页面比较简单,内容短,但是都有个底部,面对各种机型,底部不是一直处于底部位置,长屏.高分辨率的机子上的表现是悬在半空中,就像一根刺卡在喉咙啊.为此做了几种尝试. 其中有个活动的 ...
css怎样给网页加页脚,在移动Web页面中使用CSS固定页脚
一种单页应用的页面结构面向移动端的单页应用(Single Page Web Application),从页面代码上来说,会使用较一般网页不同的结构.单页应用并不是说应用只需要一个视图,而是说可以将组 ...

如何将页脚（footer）保持在页面底部

文章目录