如何将footer标签固定在底部_让footer固定在页面底部

最近做了几个触屏版页面，页面比较简单，内容短，但是都有个底部，面对各种机型，底部不是一直处于底部位置，长屏、高分辨率的机子上的表现是悬在半空中，就像一根刺卡在喉咙啊。为此做了几种尝试。

其中有个活动的触屏页面只有一个，并且页面上内容固定，所以首先想到的处理方式也比较简单，也很实用。

html代码：

头部

内容

底部

html代码方面不需要额外增加什么标签，改怎么写就怎么写，处理的重点是css：

html,body{ height: 100%;}

body{ position: relative; min-height: 550px;}

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

以上的样式都是必须的，主要是用到了相对定位，min-height的值根据页面内容来定，要自己计算下，在最小的高度里面，要能放下header、中间内容和底部。这个做法适合一些内容固定、单个页面。

如果是针对一个站点来处理，各个页面的高度必然不会太一致，而且有的页面内容是动态的，所以要找个能批量处理的方法。先看代码：

html代码：

头部

内容

底部

css代码：

html,body{ height: 100%; }

.wrapper{ min-height: 100%; margin-bottom: -50px;}

.wrapper-inner{ padding-bottom: 50px; }

footer{ height: 50px; overflow: hidden;}

从上面的html代码部分看出，多了两层div，分别是div.wrapper和div.wrapper-inner，对于简单的页面，这样的多余确实不能忍，但是为了拔刺，再加两层我也干啊。

看css，前面三段是必须的，margin和padding具体的值根据footer的内容决定，不要小于footer的高度就行了，否则会出现不必要的滚动条。

以上两种方法都很好的使footer固定在页面底部，可根据页面来选择使用哪种方法。

如何将footer标签固定在底部_让footer固定在页面底部相关推荐

flex 底部固定_小猿圈网站页面底部固定的方法
网络发展到了今天,很多朋友对于网站已经不陌生了,但是当我们看网页时你注意到网站的底部了吗?虽然很少人会注意到他,但是如果不在底部的话,会很难看,今天小猿圈web前端讲师就为你介绍网站页面底部固定的方法 ...
HTMl中内容离页面底部距离,css – 限制高度与页面底部的距离
如果您的目标是现代浏览器,则可以使用 calc和 vh来实现目标. 如果您需要将按钮放在屏幕中间,只需从.popup的最大高度中减去按钮的位置即可. .wrapper { position: abso ...
odoo自定义按钮覆盖原来的底部按钮以及footer标签覆盖问题
问题: odoo自身定义了底部和顶部的按钮,底部按钮定义在footer标签中.当想要覆盖odoo本来的底部按钮时,只需要自定义一个footer标签就可以 ** 解决办法:自定义footer标签在模型 ...
html footer写法,HTML5 footer标签元素 css3布局教程
HTML5 标签元素新增html5底部footer元素标签,对html 5新增footer标签根底认识到了解footer css组织教程做到真正掌控与认识记得我们在畴前html5版本夙昔机关网页底 ...
footer.php在哪,HTML5的footer标签元素怎么使用
H5里面增加了一个标签元素,那么我们要怎样使用呢?记得我们在html5版本以前布局网页底部版权时,都会习惯使用id="footer"或class="footer" ...
「HTML和CSS入门指南」footer 标签详解
什么是 footer 标签? 在 HTML 中,footer 标签用于表示页面或区域的页脚部分.通常用于包含版权声明.联系信息和其他重要元素. footer 标签的基本语法以下是 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 ...
如何将footer标签固定在底部_如何让footer标签置于页面最底部
这次给大家带来如何让footer标签置于页面最底部,让footer标签置于页面最底部的注意事项有哪些,下面就是实战案例,一起来看一下. 需求:有时候,当页面内容较短,撑不开浏览器高度,但是又希望foo ...

如何将footer标签固定在底部_让footer固定在页面底部

如何将footer标签固定在底部_让footer固定在页面底部相关推荐

最新文章

热门文章