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

这次给大家带来如何让footer标签置于页面最底部，让footer标签置于页面最底部的注意事项有哪些，下面就是实战案例，一起来看一下。

需求：有时候，当页面内容较短，撑不开浏览器高度，但是又希望footer能在窗口最低端。

思路：footer的父层的最小高度是100%，footer设置成相对于父层位置绝对(absolute)置底(bottom：0)，父层内要预留footer的高度。

html代码：

CSS如下：#wapper{

position: relative; /*重要！保证footer是相对于wapper位置绝对*/

height: auto; /* 保证页面能撑开浏览器高度时显示正常*/

min-height: 100% /* IE6不支持，IE6要单独配置*/

}

#footer{

position: absolute; bottombottom: 0; /* 关键 */

left:0; /* IE下一定要记得 */

height: 60px; /* footer的高度一定要是固定值*/

}

#main-content{

padding-bottom: 60px; /*重要！给footer预留的空间*/

}

这时候，其它浏览器上都能正常显示了，但是IE 6要另外处理：

相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

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

Gridsome(四)：完善简易博客网站 (内有 footer 不满一屏时在最底部，超出一屏时在页面最底部解决方案)
footer 置于页面的底部利用绝对定位 /* 文件目录:src/layouts/Defaults.vue */.footer {color: #c5c5c5;position: absolute; ...
HTML的footer置于页面最底部
vue项目中,使用element-ui的布局,仍然出现footer不固定页面底部的情况,网上找到的一个管用的方法是:footer高度固定+绝对定位 <html><head>& ...
h5 android底部导航栏,安卓微信端h5 页面增加底部导航栏总结
Aphorism grow in errors overview 最近在写一个移动端的 jsp 项目, 应项目需求须在安卓机器上实现一个 ios 微信h5页面底部的导航条想到的实现方案: 通过 ...
html中如何把一个div放到页面底部,html – 如何将DIV锚定到页面的底部？
看到css-tricks: CSS: #footer { position:fixed; left:0px; bottom:0px; height:30px; width:100%; backgrou ...
如何将footer标签固定在底部_如何将页脚固定在页面底部(多种方法实现)
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果 ...
如何将footer标签固定在底部_如何让网页的footer一直固定在底端
我们在开发网站的时候一般都会分header.main.side.footer.这些模块分别包含了各自公用的信息,比如header一般都是本网站所有页面需要引入的模块,里面一般都是放置菜单等信息:而fo ...
如何将footer标签固定在底部_div footer标签css实现位于页面底部固定
作为一个页面仔你一定遇到过:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看 ...
bootstrap 固定最底部_固定在页面顶部或底部的导航栏《 Bootstrap 3 基础》
Bootstrap 里面的导航栏有两种样式,你现在看到的是默认的样式,这里我们把 navbar-default 这个类 ... 换成 navbar-inverse ... 这样会得到一个暗色背景的导航 ...
html中如何在页面底部增加,HTML中footer固定在页面底部的若干种方法
如果主体内容过短不足以支撑浏览器时,footer会上移,非常影响页面,算是一个大bug了,搜过很多种方法现整理一下footer固定在第的若干种方法,供以后参考.(欢迎大家积极补充.) 以上布局为给个人 ...

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

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

最新文章

热门文章