HTML页脚无论内容怎么变都在网页的最底部

原创 2015年07月10日 15:45:53

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>

相关文章推荐

网页布局中页面内容不足一屏时页脚footer固定底部

网页布局中页面内容不足一屏时页脚footer固定底部实现样式: -页面内容不足一屏时页脚固定在底部; -页面内容超过一屏时,滚动内容到底部时出现页脚;下面介绍两种方案,第一种方案依赖于浏览器对bo...

Html让页脚始终居于屏幕最下(css让页脚始终在底部不论页面内容多少)

让页脚始终在页面底部,不论页面内容是多或者少页脚始终在页面底部,在某些情况下这些功能还是比较实用的,下面为大家介绍下几种不错的实现方法,大家可以参考下  原文地址http://www.jb51....

css 让页脚始终在底部

让页脚始终在页面底部,不论页面内容是多或者少页脚始终在页面底部。 方案一: body,html { margin: 0; padding: 0; height:100%; } #m...

如何将页脚固定在页面底部

作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你...

如何将页脚固定在页面底部

来源:w3cplus 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给...

Sticky Footer 让页脚紧贴页面底部

功能效果:当页面内容不超过当前屏幕高度时,页脚在屏幕的底部;当页面内容过多超过当前屏幕高度时,页脚在内容后面。图片效果演示: 当页面内容不超过当前屏幕高度时: 当页面内容过多超过当前屏幕高度时: ...

如何将页脚固定在页面底部(多种方法实现)

[导读]当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 ...

如何将页脚固定在页面底部

作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你...

JS实现让页脚一直固定在页面底部

当内容不够无法撑开页面时,需要将尾部一直固定在页面底部,JS实现页脚在浏览器可视范围内始终置底。 如下图所示: 无标题文档 * { margin: 0px; padding: 0px; ...
  • sweet_o
  • sweet_o
  • 2016年12月26日 16:18
  • 1908
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML页脚无论内容怎么变都在网页的最底部
举报原因:
原因补充:

(最多只允许输入30个字)