HTML页脚无论内容怎么变都在网页的最底部
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML页脚无论内容怎么变都在网页的最底部相关的知识，希望对你有一定的参考价值。
给页脚内容标签设置css固定定位：position: fixed;bottom: 0;当然，前提是页脚内容标签的父标签也要设置相对定位：position: relative 。页脚的父标签一般是body，或者自己另外设置。当父标签是body时，可以不用写position: relative，网页会默认选择body作为父标签的 参考技术A <!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> 参考技术B 用绝对定位
除非需要滚动条，否则会粘在浏览器底部的 HTML 页脚
【中文标题】除非需要滚动条，否则会粘在浏览器底部的 HTML 页脚【英文标题】：HTML Footer that sticks to the bottom of browser unless scrollbars needed 【发布时间】：2012-03-11 06:54:23 【问题描述】：在某些网页上，内容很少，页脚在我的页眉附近蜷缩起来。在这些情况下，我希望页脚粘在底部。我可以在 CSS 中轻松做到这一点：
#footer
position: fixed;
width: 100%;
bottom: 0;
效果很好。但是，有时内容不是最少的，您甚至可能需要滚动才能看到底部的内容。在这些情况下，我希望页脚像往常一样直接出现在内容之后。
有没有办法在 CSS 中做到这一点？我需要 Javascript hack 吗？如果我需要 hack，有没有好的图书馆？我已经在使用 jQuery，很高兴根据它使用一些东西。我不关心 IE8 或更低版本。我只关心 IE9+ 和最新版本的 Chrome、Firefox、Safari 和 Opera。
【问题讨论】：
【参考方案1】：我使用了这里描述的技术： http://www.cssstickyfooter.com/
除了提前知道页脚高度的要求之外，似乎工作完美......
【讨论】：
【参考方案2】：由于您需要的功能是在内容不足以填充浏览器高度时在 content 容器中使用空格，因此您可以为 content div 使用最小高度以使其强制页脚到页面底部。
即。如果您的 html 是：
<div class='header'> header </div>
<div class='content'> some content here </div>
<div class='footer'> footer </div>
然后通过应用类似的css：
.content min-height:300px;
内容将始终至少占据该高度，并且不会靠近标题。
如果内容更受欢迎，您也可以尝试margin-bottom 的内容
【讨论】：
问题是我不知道要制作多高的内容...除非我使用javascript。我当然可以，但要寻找 CSS 解决方案或 javascript/jquery 库。以上是关于HTML页脚无论内容怎么变都在网页的最底部的主要内容，如果未能解决你的问题，请参考以下文章