关闭

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

标签: htmlcssjquery
107人阅读 评论(0) 收藏 举报
分类:

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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:144次
    • 积分:21
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档