方法一：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. Windows、mac字体安装教程

    请问字体如何安装? Win7.8.10安装字体方法: http://jingyan.baidu.com/article/14bd256e27c517bb6c26127c.html mac安装字体方法: ...

  2. 转：不在同一个服务器上的数据库之间的数据操作（oracle/sql server的对比）

    如何操做不在同一个数据库中的数据操作: 一.对于SQL server来讲:  1.采用创建链接服务器的方式:    (1).创建链接服务器       exec sp_addlinkedserver  ...

  3. Android 断点续传下载

    断点续传在面试中出现的概率还是比较大的,因为一般的应用都需要. 这个代码是从网上找来的,自己改了点东西,能跑通,但是这个代码并不是最优代码和设计.但是基本思路体现出来了,可以以这个为基础来进行修改.先 ...

  4. 在Jquery validation里验证通过后，自定义提交不同的action路径，适合一个窗口既可以作为添加对话框也可以作为编辑对话框

    $("#myform").validate({ debug: true, //调试模式取消submit的默认提交功能 ignore: '#Password,#ConfirmPass ...

  5. Windows 开发之VC++垃圾清理程序软件

    概述 本程序软件的主要实现垃圾文件清理的功能,即对指定的文件格式的临时文件或垃圾文件进行遍历.扫描.显示.删除清理等功能.在程序界面设计方面,对默认对话框重新自定义绘制,主要包括标题栏的重绘.对话框边 ...

  6. Centos网络时好时超时问题解决

    近期公司使用的Centos突然出现网络不稳定现象,有公网,内部可以PING通外网,但是外部PING这个IP时,经常丢包现象,而且一丢包就是连续性的长达七八次,甚至十几次. 这个问题折腾了很长时间,因为 ...

  7. Linux防火墙的关闭和开启(转)

    1) 重启后生效 开启: chkconfig iptables on 关闭: chkconfig iptables off 2) 即时生效,重启后失效 开启: service iptables sta ...

  8. storyboard，xib

    1. 从xib的viewcontroll中启动storyboard 或者 从一个storyboard切换到另一个storyboard: – (IBAction)openStoryboard:(id)s ...

  9. iOS多线程常用类说明

    iOS的多线程,涉及到如下一些类,这里集中做个介绍,免得混淆. 1.NSTimer 很显然,这是定时器类 2.NSTask iOS 不支持 NSTask 在很多并发操作的时候,多线程太耗资源,也太危险 ...

  10. Redis全方位讲解--哨兵模式（Sentinel模式）(转载)

    前言 当按照上一篇<redis主从复制>部署好之后,我们会想,一旦redis的master出现了宕机,并且我们并没有及时发现,这时候就可能会出现数据丢失或程序无法运行.此时,redis的哨 ...