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

发布网友发布时间：2022-04-23 10:41

共3个回答

热心网友时间：2022-04-19 06:28

给页脚内容标签设置css固定定位：position: fixed;bottom: 0;
当然，前提是页脚内容标签的父标签也要设置相对定位：position: relative 。页脚的父标签一般是body，或者自己另外设置。当父标签是body时，可以不用写position: relative，网页会默认选择body作为父标签的

热心网友时间：2022-04-19 07:46

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

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

热心网友时间：2022-04-19 09:20

用绝对定位

全部栏目

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