一、开发可能遇到的问题

当你做一个项目的时候，可能有多个页面，但是每个页面用到的头部导航栏和尾部信息栏可能一样，所以就可以把他们写到一个公共的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

css之让尾部永远固定在页面最下方相关推荐

在html用div怎样写页脚,使用div+CSS将页脚始终控制在页面最下方的方法
tml和body的高度并不一定相同,在内容少的时候,body的高度要小于html,当然这只会出现在body中的内容所占的空间高度小于浏览器的视口高度的时候,此时html的高度大于body的高度.网页中 ...
前端如何将页脚固定在页面底部
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果 ...
如何将footer标签固定在底部_如何将页脚固定在页面底部(多种方法实现)
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果 ...
bootstrap 固定最底部_固定在页面顶部或底部的导航栏《 Bootstrap 3 基础》
Bootstrap 里面的导航栏有两种样式,你现在看到的是默认的样式,这里我们把 navbar-default 这个类 ... 换成 navbar-inverse ... 这样会得到一个暗色背景的导航 ...
DIV+CSS:页脚永远保持在页面底部
页脚永远保持在页面底部有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...
在php中页面布局 3列左右侧固定中间自适应居中,css三列布局--两边固定中间自适应和中间固定两边自适应...
三列布局本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局思路:将 ...
html中页面布局技术,CSS基础之几种常见的页面布局
CSS基础之几种常见的页面布局本人前端菜鸟一枚,在学习 CSS 过程中发现网上流传的教程参差不齐,要么内容不够详细,要么方法就是错的,按照它给出的方法不能实现我想要的目的.于是自己决定写一篇经验.如 ...
html 下拉到一定位置,浏览器向下滚动到一定位置继续滚动时，侧边导航固定在页面顶部，再滚动到一定位置时页面再向下滚动侧边导航不再固定。这种效果怎么实现呢...
1.浏览器向下滚动到一定位置继续滚动时,侧边导航固定在页面顶部,再滚动到一定位置时页面再向下滚动侧边导航不再固定.页面向上滚动到一定位置继续滚动时,侧边导航保持在原来位置.这种效果怎么实现呢 2.. ...
JS实现让页脚一直固定在页面底部
2019独角兽企业重金招聘Python工程师标准>>> JS实现页脚在浏览器可视范围内始终置底. 如下图所示: 代码如下: <!DOCTYPE html> <htm ...

css之让尾部永远固定在页面最下方

css之让尾部永远固定在页面最下方

一、开发可能遇到的问题

二、如何解决

方法一

方法二

方法三

方法四

css之让尾部永远固定在页面最下方相关推荐

最新文章

热门文章