方法一：

HTML结构：

   <div id="id_wrapper">

     <div id="id_header">

       Header Block

     </div>

     <div id="id_content">

       Content Block

     </div>

     <div id="id_footer">

       Footer Block

     </div>

   </div>

CSS结构：

       html, body {

     /* 設定body高度為100% 拉到視窗可視的大小 */

     height: 100%;

 }

 *{

     padding:;margin:;

 }

 #id_wrapper {

     /* 設定高度最小為100%, 如果內容區塊很多, 可以長大 */

     min-height: 100%;

     /* 位置設為relative, 作為footer區塊位置的參考 */

     position: relative;

 }

 #id_header {

     /* 設定header的高度 */

     height: 40px;

     box-sizing: border-box;

     background: green;

 }

 #id_content {

     /* 留出footer區塊的空間  padding-bottom与footer高度相同 */

25　　　　

     padding-bottom: 40px;

     /*height: 800px;*/

     background: #666;

 }

 #id_footer {

     /* 設定footer的高度 */

     height: 40px;

     box-sizing: border-box;

     /* 設定footer絕對位置在底部 */

     position: absolute;

     bottom:;

     /* 展開footer寬度 */

     width: 100%;

     background: yellow;

 }

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

html结构：

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

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

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

CSS设置：

 html{height:100%;}

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

 .header{background-color: #ffe4c4;height:40px;width: 100%;}

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

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

首先，设置body的高度至少充满整个屏幕，并且body作为footer绝对定位的参考节点；

其次，设置main（footer前一个兄弟元素）的padding-bottom值大于等于footer的height值，以保证main的内容能够全部显示出来而不被footer遮盖；

最后，设置footer绝对定位，并 设置height为固定高度值 。

方法三：footer高度任意+js

HTML结构：

<body>

    <header>header</header>

    <main>main content</main>

    <footer>footer</footer>

</body>

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:100%;}

js代码:

$(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);

});

将footer固定在页面最下方的更多相关文章

  1. 让footer固定在页面（视口）底部（CSS-Sticky-Footer）

    让footer固定在页面(视口)底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  2. 让footer固定在页面底部（CSS-Sticky-Footer）

    让footer固定在页面底部(CSS-Sticky-Footer)     这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  3. HTML中footer固定在页面底部的若干种方法

    <div class="header"><div class="main"></div></div> <d ...

  4. footer固定在页面底部的实现方法总结

    方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...

  5. 在不适用fixed的前提下，当内容较少时footer固定在页面底部

    使用css,参考国外的一个解决方法: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ How to use the CSS ...

  6. Footer固定在页面底部(CSS)

    <style type="text/css"> #wapper{ position: relative; /*重要!保证footer是相对于wapper位置绝对*/ h ...

  7. 利用CSS使footer固定在页面底部

    1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...

  8. 解决Web开发HTML页面中footer保持在页面底部问题

    如图所示如何实现footer在内容不足或者浏览器窗口变大变小的时候一直保持在底部呢?请看如下两种解决方案. 第一种方案: footer高度固定+绝对定位 (兼容性比较好完美兼容IE8+)思路:foot ...

  9. 【转载自W3CPLUS】如何将页脚固定在页面底部

    该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...

随机推荐

  1. lower_case_table_name

    linux上是区分表名大小写的,但是可以通过 my.cnf文件中设置不区分! 1.找到my.cnf文件的所在地. find / -name my.cnf 找到这个文件的位置.我服务器上的位置是 /us ...

  2. What is a schema in a MySQL database?

    摘自:https://www.quora.com/What-is-a-schema-in-a-MySQL-database What is schema? In MySQL, physically, ...

  3. DOM节点操作阶段性总结

    HTML中能看到的所有东西都是dom树中的一个节点,注意是“所有”,使用childNodes()可以看到,回车(换行)也是一个节点. 从上图可以看到,select中有四个option,但是有9个节点. ...

  4. 开发自己的网上支付案例代码（易宝支付php）

    1.简单的图解(如上所示) 易宝支付与支付宝是不一样的,但也有类似之处,支付宝是专门为淘宝软件开发的一套机制,资金会在中间支付公司(支付宝)停留,等待顾客确认,当顾客确认后,才会真正扣钱.而易宝支付时 ...

  5. 阿里云Windows远程连接出现身份验证错误，要求的函数不正确”的报错。

    最近很多阿里云用户在远程Windows Server的云服务器ECS时出现“身份验证错误,要求的函数不受支持”的报错. 这个问题解决起来非常简单,修改组策略中的一个配置就可以了. 在运行中输入gped ...

  6. 嵌入式GPIO接口及操作（二）

    目标:C语言实现点亮LED灯 首先是main函数,并不特殊,它是被系统调用来执行的,main函数结束后要返回调用main函数的地址处,那么裸机程序,没有操作系统做这些工作,就要自己写调用main函数的 ...

  7. BZOJ1433_假期的宿舍_KEY

    题目传送门 二分图匹配的题目. 但建边有一定难度,关系比较复杂. 首先要统计总共需要几张床. 在校且住校的会需要一张床,不住校的需要一张床. 然后对于在校且住校的与自己的床连边,不住校的与认识的住校的 ...

  8. 如何理解 UL94HB , UL94-V0 , UL94-V1 , UL94-V2

    塑料阻燃等级由HB,V-2,V-1向V-0逐级递增: UL94V0,V1,V2是不同的阻燃等级,其等级不同,耐燃的测试方法亦不同,测试判定的标准也不同. V0的测试方法是将测试物倾斜45度,用酒精灯点 ...

  9. LeetCode: 61. Rotate List（Medium）

    1. 原题链接 https://leetcode.com/problems/rotate-list/description/ 2. 题目要求 给出一个链表的第一个结点head和正整数k,然后将从右侧开 ...

  10. quartz与Spring整合

    1.创建maven工程,导入spring和quartz相关依赖 2.创建任务类 3.在spring配置文件中配置任务类 4.在spring配置文件中配置JobDetail 5.在spring配置文件中 ...