方法一：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. om.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException

    Error:Execution failed for task ':app:dexDebug'.> com.android.ide.common.process.ProcessException ...

  2. Android SDK镜像的介绍使用【转发】

    由于一些原因,Google相关很多服务都无法访问,所以在很多时候我们SDK也无法升级,当然通过技术手段肯定可以解决,但是比较麻烦,而且下载速度也不怎么样. 这里笔者介绍一个国内的Android镜像站, ...

  3. 调试Felix Framework

    这里是指用Eclipse调试Felix Framework自身. 1. 首先安装Eclipse Java EE,然后再安装Java Source Attacher,这样才会在Jar文件的右键菜单“属性 ...

  4. 基于微信小程序的用户列表点赞功能

    代码地址如下:http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4.想 ...

  5. mac go环境报警告

    go get -u github.com/beego/bee 报警告: # github.com/beego/beeld: warning: text-based stub file /System/ ...

  6. unity3D中使用Socket进行数据通信（二）

    上一篇博客主要介绍了使用socket搭建服务端和client程序,这一篇来说说socket的数据传输,我们使用socket的目的是解决点对点之间的数据传输,之前提到了socket中一个重要的概念:po ...

  7. Windows路由表配置：双网卡同时上内外网

    管理员模式CMD 路由表解释 route print -4 删除默认设置 route delete 0.0.0.0 外网路由,全走无线,192.168.0.1为无线网关 route add 0.0.0 ...

  8. java线程同步方法，方法块差别

    先说同步方法.它究竟是锁定的当前对象,还是当前类 代码块1 package com.ssss; public class Thread1 implements Runnable { //public ...

  9. Strategy Execution with Strategy Maps and balanced score cards

    4 barriers for strategy execution: - vision barrier - people barrier - resource barrier - management ...

  10. Linux下使用DD命令测试磁盘读写速度

    dd是Linux/UNIX 下的一个非常有用的命令,作用是用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换,所以可以用来测试硬盘的读写能力~ 几种常见的DD命令,先看一下区别~ dd bs=6 ...