一、开发可能遇到的问题
当你做一个项目的时候，可能有多个页面，但是每个页面用到的头部导航栏和尾部信息栏可能一样，所以就可以把他们写到一个公共的css文件。
现在思考一个问题，当一个页面显示的内容特别少的时候，可能只占整个可视区域的30%，这种情况下，怎么让尾部永远固定在页面最下方呢？也就是说，当内容少的时候，尾部直接显示在可视区域最下方，当内容多的时候，我们最初只能看到内容，看不到尾部，但随着滚动条的滚动，可以看到尾部位于页面最下方。
我做项目的时候遇到过这样一个问题，我通过定位将其直接固定在页面最下方，乍一看，没什么问题，但是当你缩放浏览器可是窗口的时候，奇怪的事情发生了。底部竟然随着滚动条的滚动，悬浮在了可视区域，而不是页面最下方了。
当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。
二、如何解决
那么如何将Web页面的“footer”部分永远固定在页面的底部呢？注意了这里所说的是页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部，换句话说，就是当内容只有一点点时，Web页面页脚显示在浏览器底部，当内容高度超过浏览器高度时，Web页面的footer部分会在页面的可用高度的最底部，总而言之Web页面的footer部分永远在页面的底部，换句说，Footer部分永远沉底。
方法一
利用footer的margin-top负值来实现footer永远固定在页面的底部效果
先上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div id="container">
<div id="header">头部</div>
<div id="content" class="clearfix">
<div id="left">
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p><p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
<p>xxxxx</p>
</div>
<div id="center">xxxxx</div>
<div id="right">xxxxxx</div>
</div>
</div>
<div id="footer">底部</div>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#container {
min-height: 100%;
height: auto !important;
}
#content {
display: flex;
padding-bottom: 60px;/*高度等于footer的高度*/
}
#footer {
position: relative;
margin-top: -60px;/*等于footer的高度*/
height: 60px;
background: #c6f;
}
/*==========其他div==========*/
#header {
height: 50px;
background-color: lime;
}
#left {
width: 18%;
margin-right: 2%;
background-color: orange;
}
#center{
width: 60%;
margin-right: 2%;
background-color: green;
}
#right {
width: 18%;
background-color: yellow;
}
效果，正常显示时
缩放屏幕时，滚轮滑到最下面，底部依然在页面最下面
分析一下原理：
1、html和body标签中必须将高度(height)设置为“100%”,这样我们就可以在容器上设置百分比高度
2、container容器必须设置一个最小高度(min-height)为100％；这主要使他在内容很少（或没有内容）情况下，能保持100％的高度
3、content这个容器有一个很关键的设置，需要在这个容器上设置一个padding-bottom值，而且这个值要等于或略大于）页脚footer的高度（height）值
4、footer容器必须设置一个固定高度，单位可以是px(或em)。footer还需要进行绝对定位，并且设置bottom:0；让footer固定在容器container的底部，这样就可以实现我们前面所说的效果，当内容只有一点时，footer固定在屏幕的底部（因为container设置了 一个min-height:100%），当内容高度超过屏幕的高度，div#footer也固定在container底部，也就是固定在页面的底部
5、注意footer放在container容器外面，也就是说两者是同级关系，如果你有新元素需要放置在与container容器同级，那你需要将此元素进行绝对定位，不然将会破坏container容器的min-height值；
6、footer进行margin-top的负值设置，并且此值等于footer的高度值，而且也要和content容器的padding-bottom值相等。
方法二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div id="container">
<div id="header">头部</div>
<div id="content" class="clearfix">
<div id="left">
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
<p>xxxxxx</p>
</div>
<div id="center">xxxxxx</div>
<div id="right">xxxxx</div>
</div>
<div class="push"></div>
</div>
<div id="footer">底部</div>
</body>
</html>
css
html,
body{
height: 100%;
margin:0;
padding:0;
}
#container {
min-height: 100%;
height: auto !important;
margin: 0 auto -60px;/*margin-bottom的负值等于footer高度*/
}
.push,
#footer {
height: 60px;
}
/*==========其他div效果==========*/
#header {
padding: 10px;
background-color: pink;
}
#content {
display: flex;
}
#left {
width: 33.3%;
background-color: orange;
}
#center{
width: 33.3%;
background-color: green;
}
#right {
width: 33.3%;
background-color: yellow;
}
#footer {
background-color: pink;
}
效果：正常显示
缩放之后的效果：滚轮滚到最下面，底部依然在页面最下面
分析一下原理
这个方法在container容器中还增加了一个div.push用来把footer推下去，下面我们就一起看看这种方法是怎么实现页脚永远固定在页面底部的
1、html,body标签和前面方法一样，需要设置“height:100%”并重置“margin”和“padding”为0；
2、关键部分就在于div#container的设置，首先需要设置其最小高度（min-height）为100％，另外这里还有一个关键点在container容器上需要设置一个margin-bottom，并且给其取负值，而且值的大小等于 footer和div.push的高度
3、在div.push中我们不应该放置任何内容，而且这个div必须放置在container容器中，而且是最底部，并且需要设置其高度值等于footer的值，push容器在此处所起的作用就是将footer往下推
方法三
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div id="container">
<header>
<p>xxxxx</p>
</header>
<section class="main">MAIN</section >
<footer>FOOTER</footer>
</div>
</body>
</html>
css
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
#container{
/*保证footer是相对于container位置绝对定位*/
position:relative;
width:100%;
min-height:100%;
/*设置padding-bottom值大于等于footer的height值，以保证main的内容能够全部显示出来而不被footer遮盖；*/
padding-bottom: 100px;
box-sizing: border-box;
}
header{
width: 100%;
height: 500px;
background: #999;
}
.main{
width: 100%;
height: 300px;
background: orange;
}
footer{
width: 100%;
height:100px; /* footer的高度一定要是固定值*/
position:absolute;
bottom:0px;
background: #333;
}
效果：正常显示
缩放显示
原理分析：
footer的父层的最小高度是100%，footer设置成相对于父层位置绝对（absolute）置底（bottom：0），父层内要预留（padding-bottom）footer的高度。
如果在main区域设置了浮动啥的你会发现footer固定在页面可视区的底部，且覆盖在内容上，这时候只要在footer的父元素样式上增加（overflow : hidden；）即可；
方法四
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div id="container">
<header>
<p>xxxxx</p>
</header>
<section class="main">
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
</section >
<footer>FOOTER</footer>
</div>
</body>
</html>
css
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
#container{
display: flex;
flex-direction: column;
height: 100%;
}
header{
background: #999;
flex: 1 0 auto;
}
.main{
background: orange;
flex: 8 0 auto;
}
.main .test1 {
width: 31.25rem;
height: 500px;
background-color: red;
}
.main .test2 {
width: 300px;
height: 300px;
background-color: green;
}
footer{
background: #333;
flex: 1 0 auto;
}
效果：正常显示
缩放显示
原理分析：
我们将 body 的 display 属性设置为 flex, 然后将方向属性设置为列, （默认是行，也就是横向布局）；同时，将html 和 body 元素的高度设置为100%，使其充满整个屏幕。
我们需要调整各个区域占用的页面空间，我们将通过flex 属性来达到这一目的，该属性实际包含了三个属性，分别是：
（1）flex-grow：元素在同一容器中对可分配空间的分配比率，及扩展比率；
（2）flex-shrink：如果空间不足，元素的收缩比率；
（3）flex-basis：元素的伸缩基准值；
本篇文章参考了该作者的部分内容https://blog.csdn.net/m0_38099607/article/details/71598423
以及另一作者https://www.cnblogs.com/wennice/p/6412816.html
如有侵权，请联系博主删除，qq1105810790