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

 <div class="container"><div class="main"></div></div>

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

如果主体内容过短不足以支撑浏览器时，footer会上移，非常影响页面，算是一个大bug了，搜过很多种方法现整理一下footer固定在第的若干种方法，供以后参考。（欢迎大家积极补充。）

以上布局为给个人写页面常用。

注：.main{

width:1050px;

margin:0 auto;

height:auto;

}

1、这是刚刚使用过的css,可以达到效果，只是不论浏览器的大小如何footer均会在底，主体内容则以滚动条形式显示。

缺点：小分辨率下达不到好的视觉体验，主体以滚动条显示，不合格

.footer{

position:fixed;

bottom:0;

left:0;

}

2、

目前用的是这种，经试验可以满足需要

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>footer需要固定在底部</title>

         <style type="text/css">

             html,body{font-size: 14px;font-family: "微软雅黑";text-align: center;width: 100%;height: 100%;min-height: 100%;border:0;line-height: none;}

             p{border: 0;margin: 0;padding: 0;line-height: none;}

             body{padding:0px; margin:0px ;}

             .container{position:relative;height: auto;min-height: 100%;margin: 0}

             .container .header{height: 100px;background: #0000FF;}

             .container .push{padding-bottom: 100px;}

             .footer{position:relative;height: 100px;margin-top:-100px;background: #0000FF;}

         </style>

     </head>

     <body>

         <div class="container">

             <div class="header">

                 <p>头部文本</p>

             </div>

             <div class="content">

                 <p>主体内容</p>

             </div>

             <div class="push"></div><!--push在此为footer占位，高度和footer的一样-->

         </div>

         <div class="footer">

             <p>底部文本</p>

         </div>

     </body>

 </html>

HTML中footer固定在页面底部的若干种方法的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

  7. 如何将页脚固定在页面底部，4中方法 转载自：W3CPLUS

    原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...

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

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

  9. 将HTML页面页脚固定在页面底部(多种方法实现)

    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...

随机推荐

  1. C# 数据库连接增删改查

    C# 连接数据库 using System.Data.sqlCliect; // 加在头 main函数里面用法(删) //连接字符串 string Connectionstring = "s ...

  2. Hibernate中的session的线程安全问题

    SessionFactory的实现是线程安全的,多个并发的线程可以同时访问一 个SessionFactory并从中获取Session实例, 而Session不是线程安全的,Session中包含了数 据 ...

  3. javascript接入阿里云服务器

    authInfo = r.data.authInfo[0]//后台请求的 var client = new OSS({ region: 'oss-cn-beijing',// 云账号AccessKey ...

  4. Struts2项目问题及解决方式

    1.  问题描述如图: 问题解释:意思就是execute()方法写错了. 问题解决: 改正:

  5. 国家与大洲对应关系json数据

    [ { "continent_cname": "欧洲", "continent_name": "EU", "c ...

  6. Shell脚本批量修改图片尺寸

    #!/bin/sh function scandir(){ local cur_dir parent_dir workdir workdir=$ cd ${workdir} if [ ${workdi ...

  7. # putty的使用和保存配置

    putty的使用和保存配置 之前使用的xshell5,但是突然之间需要我去注册,根本无法使用.在网上看到可以到官网申请家庭和学校版本,但是我的邮箱一直没有接收到邮件.于是我放弃xshell.就拿起了之 ...

  8. 关于Oracle死锁处理方法

    关于数据库死锁的检查方法一.         数据库死锁的现象程序在执行的过程中,点击确定或保存按钮,程序没有响应,也没有出现报错.二.         死锁的原理当对于数据库某个表的某一列做更新或删 ...

  9. May 23rd 2017 Week 21st Tuesday

    Winners are not those who never fail but those who never quit. 成功者不是从不失败,而是从不放弃. Nothing is impossib ...

  10. 到底哪种类型的错误信息会阻止business transaction的保存

    当试图在CRM WebUI保存一个business transaction比如Opportunity时,可能会遇到各种各样的错误消息.有的错误消息会阻止Business transaction被sav ...