本文主要是介绍HTML页脚无论内容怎么变都在网页的最底部,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
HTML页脚无论内容怎么变都在网页的最底部
废话不多说,直接代码贴上
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>网页底部固定</title><style>body{margin: 0px auto; padding: 0px; width: 800px;}/*绝对定位**/.pos_foot {position: absolute;bottom: 0;overflow: hidden;word-spacing: 3px;zoom: 1;}/*基本样式*/.foot {width: 798px;border: 1px solid #000;height: 42px;}</style><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script></head><body><div style="height: 80px; border: 1px solid #0000EE;">头部</div><div style="height: 200px;border: 1px solid #007020;">内容</div><div id="footer" class="foot">底部</div><!-- jquery脚本 --><script>$(function() {Footer();//浏览器大小改变$(window).resize(function() {Footer();});});//自适应方法function Footer() {var footer = $("#footer");var body = $("body").outerHeight(true);var liulanqi = $(window).height();var top = footer.top;var height = footer.outerHeight(true);//alert(( height)+" "+liulanqi)if (body < liulanqi) {footer.addClass("pos_foot");} else {footer.removeClass("pos_foot");}}</script></body>
</html>
这篇关于HTML页脚无论内容怎么变都在网页的最底部的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!