方法一：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. 登陆Oracle EBS的Form遇到问题Internet Explorer has modified this page to help prevent cross-site scripting

    登陆Oracle EBS的Form遇到问题Internet Explorer has modified this page to help prevent cross-site scripting 今 ...

  2. 使用maven拆分项目

    在开发环境中,有时需要专人负责专门的模块,其他模块不需接触,这就需要将项目拆分,如下 fund_demo项目具有三个模块,现将主业务core模块单独提出另建一个项目fund_core,拆分时需要注意相 ...

  3. 如何在 Android 手机上安装 Ubuntu 13.04

    在农村,一切都是相对的. 长话短说,我已经厌倦了我们在农村做的一个小小的突破. 我本该去放松,读了一大堆东西涉及到自然语言的处理.但是因为我这些天一直在修改LXC和chroot的时候,我决定将我的An ...

  4. 【转帖】云平台发现服务构建：为什么不使用ZooKeeper

    http://www.chinacloud.cn/show.aspx?id=19979&cid=16 [日期:2015-04-29] 来源:dockerone   作者: [字体:大 中 小] ...

  5. CentOS 7 下挂载NTFS文件系统并实行开机自动挂载

    CentOS 7 下想要挂载NTFS的文件系统该怎么办呢? 我们需要一个NTFS-3G工具,并编译它之后在mount就可以了,就这么简单. 首先要进入官网下载NTFS-3G工具 http://www. ...

  6. 浅谈AngularJS的$parse服务

    $parse 作用:将一个AngularJS表达式转换成一个函数 Usage$parse(expression) arguments expression:需要被编译的AngularJS语句 retu ...

  7. Webkit初始化以及载入URL过程中各种对象的建立时序以及DOM树的建立详情分析

            众所周知,Webkit须要创建DOM树. 为此它须要创建WebView, Chrome,Page,Frame, Document. Document Parser, DOM Tree ...

  8. Genymotion INSTALL_FAILED_CPU_ABI_INCOMPATIBLE

    出现这个错误的原因是Genymotion默认的处理器是x86的,不是arm的.所以安装的时候会出错,仅仅要把x86转换成arm就能够了. 转换方法: 1.下载转换的zip文件:X86 to ARM 2 ...

  9. linux下C++的man文件安装

    GCC提供了一份c++的man文档,地址:ftp://gcc.gnu.org/pub/gcc/libstdc++/doxygen/ 下载最新版的文档,比如:libstdc++-api.20140403 ...

  10. Proguard语法及常用proguard.cfg代码段

    本文主要ProGuard常用语法.标准proguard.cfg文件内容.常用proguard.cfg代码段及proguard与log level结合解决debug模式日志问题. 1.ProGuard的 ...