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>

CSS + DIV 让页脚始终底部

1、利用 bottom 属性? 在实践之前,很容易联想到用 CSS 里面的 bottom 属性让页脚在最下面,可是这个是行不通的。如果使用了如下方法: footer { bottom:...
  • nathanhuang1220
  • nathanhuang1220
  • 2014年04月09日 11:42
  • 2895

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

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

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

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

当页面内容不够的时候,怎么让footer一直底部显示?

Document html,body {   margin: 0;   padding:0;   height: 100%; } #container {   min-height:...
  • zhenhanhong_tony
  • zhenhanhong_tony
  • 2016年09月28日 18:08
  • 2098

如何让Footer无论页面长短都在最底部, 并和正文保持固定高度?

摘自:http://www.dewen.io/q/1 html结构: id="container"> id="content">页面正文 class="footer...
  • windxxf
  • windxxf
  • 2015年01月13日 11:34
  • 7384

网页内容高度不够时,让footer处于页面底部的方法(不是固定在底部)

页面内容如上,设置如下css样式。 .main { display: flex; min-height: 100vh; flex-direction: column; } header...
  • buppt
  • buppt
  • 2017年09月21日 11:15
  • 247

让页脚始终在页面的最下方

/*让body 和html 占满浏览器*/ body,html {  margin: 0;  padding: 0;  height:100%;  }  /*让main占满浏览器*...
  • Lambert0320
  • Lambert0320
  • 2017年03月14日 18:55
  • 182

CSS打造的一个永远在页面最底端(页脚)的样式

本文中所实现的特效就是像有些下载站那样,当你进入到具体的下载页时,它会在页面的顶端用一个鲜亮的颜色提示你选择下载方式或地址,我们暂时把下载站的这种方式称为页眉吧,本例完全反过来了,是永远在页面的最下边...
  • teresa502
  • teresa502
  • 2011年11月25日 12:37
  • 5452

设计网页页脚的15个超实用技巧

你网站最重要的部分之一就是页脚。是的,我是认真的。这里也许并不适合伟大的设计或者令人印象深刻的内容会存在的区域,但这里是用户寻找信息的地方。所以在设计网站项目时候也不要忽略这个地方。    ...
  • natalie86
  • natalie86
  • 2015年03月30日 19:56
  • 2261

html页脚始终保持最下

今天项目中原先没有页脚,但
  • csssy003
  • csssy003
  • 2014年05月04日 11:47
  • 857
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML页脚无论内容怎么变都在网页的最底部
举报原因:
原因补充:

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