方法一：footer高度固定+绝对定位

<html>

  <head>

    <style type="text/css">

        html{height:%;}

        body{min-height:%;margin:;padding:;position:relative;}

        .header{background-color: #ffe4c4;}

        .main{padding-bottom:100px;background-color: #bdb76b;}/* main的padding-bottom值要等于或大于footer的height值 */

        .footer{position:absolute;bottom:;width:%;height:100px;background-color: #ffc0cb;}

    </style>

  </head>

  <body>

    <div class="header">header</div>

    <div class="main">main content</div>

    <div class="footer">footer</div>

  </body>

</html>

效果：

方法二：footer高度固定+margin负值

<html>

  <head>

    <style type="text/css">

      html,body{height:%;margin:;padding:;}

      .container{min-height:%;}

      .header{background-color: #ffe4c4;}

      .main{padding-bottom:100px;background-color: #bdb76b;}/* main的padding-bottom值要等于或大于footer的height值 */

      .footer{height:100px;margin-top:-100px;background-color: #ffc0cb;}/* margin-top（负值的）高度等于footer的height值 */

    </style>

  </head>

  <body>

    <div class="container">

        <div class="header">header</div>

        <div class="main">main content</div>

    </div>

    <div class="footer">footer</div>

</html>

方法三：footer高度任意+js

<html>

  <head>

    <style type="text/css">

      html,body{margin:;padding: ;}

      .header{background-color: #ffe4c4;}

      .main{background-color: #bdb76b;}

      .footer{background-color: #ffc0cb;}

      /* 动态为footer添加类fixed-bottom */

      .fixed-bottom {position: fixed;bottom: ;width:%;}

    </style>

    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

    <script type="text/javascript">

      $(function(){

          function footerPosition(){

              $("footer").removeClass("fixed-bottom");

              var contentHeight = document.body.scrollHeight,//网页正文全文高度

                  winHeight = window.innerHeight;//可视窗口高度，不包括浏览器顶部工具栏

              if(!(contentHeight > winHeight)){

                  //当网页正文高度小于可视窗口高度时，为footer添加类fixed-bottom

                  $("footer").addClass("fixed-bottom");

              } else {

                  $("footer").removeClass("fixed-bottom");

              }

          }

          footerPosition();

          $(window).resize(footerPosition);

      });

    </script>

  </head>

  <body>

    <div class="header">header</div>

    <div class="main">main content</div>

    <div class="footer">footer</div>

  </body>

</html>

ref： https://segmentfault.com/a/1190000004453249

HTML的footer置于页面最底部的方法的更多相关文章

  1. HTML5将footer置于页面最底部的方法(CSS+JS)

    JavaScript: <script type="text/javascript"> $(function(){ function footerPosition(){ ...

  2. HTML的footer置于页面最底部

    vue项目中,使用element-ui的布局,仍然出现footer不固定页面底部的情况,网上找到的一个管用的 方法是:footer高度固定+绝对定位 <html> <head> ...

  3. [JavaScript] css将footer置于页面最底部

    <!-- 父层 --> <div id="wapper"> <!-- 主要内容 --> <div id="main-conten ...

  4. 记一些让footer始终位于网页底部的方法

    上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面..而且有的页面内容少的话不能把尾部挤到最下面,所以, ...

  5. footer始终在页面最底部的方法（问题待检验）

    一.css方法 <style type="text/css"> html,body{ height: 100%; } body{ display: flex; flex ...

  6. 将HTML页面页脚固定在页面底部(多种方法实现)

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

  7. vue实现部分页面导入底部 vue配置公用头部、底部，可控制显示隐藏

    vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...

  8. 网站设计:将Footer固定在浏览器底部

    在设计网站的时候,如果你某个页面的内容没有满屏,那你的footer会离浏览器底部很远,整体看起来很难看,这里用JavaScript提供一种方法来将footer固定在浏览器底部. function fi ...

  9. div+css页面右侧底部悬浮层

    效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

随机推荐

  1. TP 查询语句中如何使用 FIND_IN_SET 这样的查询方法

    TP 查询语句中如何使用 FIND_IN_SET 这样的查询方法 $condition['_string'] = 'FIND_IN_SET('.$citys.',city)';

  2. cookie 封装

    1.代码 ;(function (factory) { var registeredInModuleLoader; if (typeof define === 'function' && ...

  3. OpenERP登录页面调整

    在OpenERP的登录页面中,有针对数据库管理的链接,为了安全起见,一般都会通过修改原始的XML来实现隐藏的目的.但这样每次重新安装以后,都要重新修改,很不方便,所以我们可以通过建立一个新模块的方式来 ...

  4. 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  5. Android成长之路-编码实现软件界面

    实现一个登陆界面: 相对布局: package cn.csdn.codeui; import android.app.Activity; import android.os.Bundle; impor ...

  6. 使用maven开发OSGI样例

    一:创建maven项目,在pom.xml里面增加例如以下依赖 <dependency> <groupId>org.osgi</groupId> <artifa ...

  7. Ajax异步打开新页面弹框被拦截，无法将参数值传递到后台

    一.Form提交,打开新页面被拦截 手动触发Form提交打开新页面是不会被拦截的,但是如果通过Ajax异步处理回调后再程序自动触发Form提交的话,就会被浏览器当成广告弹框拦截 1.暂时的解决办法:如 ...

  8. ubuntu环境下配置jdk

    方法1:修改/etc/profile 文件 /etc/profile:在登录时,操作系统定制用户环境时使用的第一个文件,此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行. 所有用户 ...

  9. XCode5中新建工程后强制使用了ARC，如何去掉？

    打开你的工程,点击目录的工程文件,最顶端蓝色的,然后选择project下你的工程,还是蓝色那项,然后build Settings,然后往下拉,在Apple LLVM 5.0 - Language - ...

  10. MFS排错

    [root@Nginx_Master mfs]# /app/server/mfs/sbin/mfsmaster start working directory: /app/server/mfs/var ...