Footer置于页面底部的技巧

今天要说的是前端开发过程中的一个小技巧，没有很大的技术含量，但在前端开发过程中经常会遇到。当页面内容很多时，footer会在底部，但当页面内容很少时，如何使footer始终在底部咧？

1.HTML结构

我一般是把footer写在footer标签里面

<footer>//footer相关代码</footer>

2必要CSS样式

html,body {//保证内容不足时，撑开页面高度；height:100%;
}
footer {//保证底部的宽度为100%；width: 100%;
}

3，jQuery代码

先定义一个名为setFooter的函数，用来设置底部footer位置

/*设置底部footer位置*/function setFooter() {var body_height = $(document.body).height()//获取body的高度var window_height = $(window).height()//获取浏览器可视区域的高度var footer_height = $("footer").height()//获取footer的高度if(body_height < window_height){$("footer").css("position","absolute");$("footer").css("bottom","0px");$("footer").css("margin-top",-footer_height);//保证不遮盖上方内容}else{$("footer").css("position","relative");};}

然后分别在页面改变大小和加载时调用setFooter()方法，注意一定要放在load事件而不是ready事件中，因为ready事件只加载了DOM结构，图片之类的都还没加载，此时获取的body的高度是不准确的。

/*监听窗口大小改变*/$(window).resize(function(){/*设置底部footer位置*/setFooter();})/*加载*/$(window).load(function(){/*设置底部页脚位置*/setFooter();});

这样就可以使Footer始终保持在页面底部了。

Footer置于页面底部的技巧相关推荐

HTML的footer置于页面最底部
vue项目中,使用element-ui的布局,仍然出现footer不固定页面底部的情况,网上找到的一个管用的方法是:footer高度固定+绝对定位 <html><head>& ...
div置于页面底部_网易内部PPT模板有点丑，如何花最少的时间提高页面颜值？
经常有朋友或者同事跟我吐槽:公司的模板太丑了,导致做出来的 PPT 有点辣眼睛! 不知道是模板真丑,还是拼命想甩锅... (不接受你的白眼) 所以,我就暗自搓搓手,就拿网易内部PPT开刀,用两个屡试不 ...
html图片位于div最底部,div置于页面底部
一直对于页面置底有一些困惑,下面这个例子不知道能不能解决 foot置底 /*html 和 body 的高度必须*/ html,body { height:100%;} .wrap { position ...
html 滚动条处于页面底部,滚动条一直置于页面底部,开发聊天程序须知。
有些时候(如开发聊天程序),我们需要将将滚动条(scrollbar)保持在最底部,比如聊天窗口,最新发出和收到的信息要显示在最下方,如果要看到最下方的内容,就必须保证滚动条保持在最底部. html P ...
元素始终置于页面底部
本文实例: 按钮始终在距离页面底部16px的位置,注意是页面底部,不是屏幕底部如果放置在屏幕底部,只需要给元素设置以下内容 .element {position: fixed;bottom: 16p ...
页面布局让footer居页面底部_网站页面结构与关键词布局技巧
网站页面布局的优化是搜索引擎优化的重要组成部分,也是网站关键词排名能否进入百度前三页甚至首页的关键,那么,网站布局优化怎么做更有利于排名?关于这点,我们分几点来讲解. 搜索引擎优化一.网站站内结构布 ...
网页内容高度不够时，让footer处于页面底部的方法(不是固定在底部)
有时候我们的需求是,当页面内容高于可视高度时,footer跟在内容最后,下拉滚动条才会显示. 当页面内容少于一页,footer显示在最底部,而不是跟着内容显示到页面中间或其他位置. 先写好html内容 ...
页面布局让footer居页面底部_网站各页面该如何布局关键词优化提升排名？
在网站优化中,最值得关注的一个事情就是关键词的布局,因为关键词的布局直接影响着网站的排名.那么怎样布局关键词才能提高页面和关键词的相关性,并提高网站排名呢?下面一起来看看. 一.利用HTML标签布局关 ...
div置于页面底部_浏览器渲染页面的原理及流程
浏览器渲染页面的原理及流程浏览器将域名通过网络通信从服务器拿到html文件后,如何渲染页面呢? 1.根据html文件构建DOM树和CSSOM树.构建DOM树期间,如果遇到JS,阻塞DOM树及CSSO ...
html 停留页面底部,HTML 中使 footer 始终处于页面底部
通常在页面中,需要使页脚 footer 部分始终处于底部.当页面高度不够 100% 时, footer 处于页面最底部,当页面内容高于 100% 时,页脚元素可以被撑到最底部. 方法一:绝对定位旋转 ...

Footer置于页面底部的技巧

Footer置于页面底部的技巧相关推荐

最新文章

热门文章