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

最新推荐文章于 2023-10-12 23:00:27 发布

ZHD__

最新推荐文章于 2023-10-12 23:00:27 发布

阅读量2.3k

点赞数 1

分类专栏： html 文章标签： html css jquery

本文链接：https://blog.csdn.net/u013254502/article/details/46831721

版权

html 专栏收录该内容

3 篇文章 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>