方法一：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. CentOS 6.2下二进制安装 MySQL 5.6

    在CentOS 6.2上 二进制方式安装 MySQL5.6二进制包 可以参考这篇文章: http://www.cnblogs.com/xiaoit/p/3988640.html 一路配置下来很顺利.. ...

  2. vue的全家桶

    自定义指令 <div v-demo="{ color: 'white', text: 'hello!' }"></div> Vue.directive('d ...

  3. setTimeout模拟setInterval调用

    在开发环境下,尽量不用间歇调用,原因是后一个间歇调用可能会在前一个间歇调用结束之前启动. 尽量使用超时调用来模拟间歇调用. 示例代码: <!DOCTYPE html> <html l ...

  4. 查看IE浏览器安装的插件

      请移步至文章:http://blog.sina.com.cn/u/6452627072  

  5. BerkeleyDB java的简单使用

    关于BerkeleyDB的有点和优点,列在以下 JE offers the following major features: Large database support. JE databases ...

  6. 配置tomcat映射jsp

    <servlet>   <servlet-name>jfjf</servlet-name>   <jsp-file>/14.jsp</jsp-fi ...

  7. HBase权威指南 高清中文版 PDF（来自linuxidc）

      内容提要 <HBase权威指南>由乔治(Lars George)著,探讨了 如何通过使用与HBase高度集成的Hadoop将 HBase的可 伸缩性变得简单:把大型数据集分布到相对廉价 ...

  8. 基于swiper的移动端H5页面,丰富的动画效果

    概述 通过运用swiper插件,制作移动端上下整屏滑动的H5页面,用来宣传或者简单注册等,可以嵌套H5音乐或者视频. 详细 代码下载:http://www.demodashi.com/demo/119 ...

  9. Android异步下载

    概述 实现App常见下载公共 支持通知栏显示 支持 暂停.取消功能,使用Service.AsyncTask实现异步下载.特点简单.实用.方便源码扩展修改 详细 代码下载:http://www.demo ...

  10. 【算法剖析】寻找两个已序数组中的第k大元素

    1.问题描述 给定两个数组A与B,其大小分别为m.n,假定它们都是已按照增序排序的数组,我们用尽可能快的方法去求两个数组合并后第k大的元素,其中,1\le k\le(m+n).例如,对于数组A=[1, ...