<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. setInterval()的三种写法

    前言: setInterval("fun()",time)有两个参数:fun()为要执行的函数:time为多久执行一次函数,单位是毫秒: 我们做一个简单的例子,就是每隔5s弹出一个 ...

  2. jQuery Ajax（异步改同步）

    在实际使用中,我们经常会用的Ajax(异步加载,在不刷新整个网页的前提下对网页部分内容进行更新) 使用时,偶尔会遇上需要从一个接口中得到一个数组和数据对应的id,在另一个接口上再得到数据,最初写法如下 ...

  3. Android性能优化之渲染篇

    下面是渲染篇章的学习笔记,部分内容和前面的性能优化典范有重合,欢迎大家一起学习交流! 1)Why Rendering Performance Matters 现在有不少App为了达到很华丽的视觉效果, ...

  4. HTML 5入门知识（四）

    表单的作用 表单不是表格,既不用来显示数据,也不用来布局网页.表单提供一个界面,一个入口,便于用户把数据提交给后台程序进行处理. 表单的数据传递方式method属性 表单的method属性用于指定在数 ...

  5. 去掉iframe白色背景方法

    在iframe内添加如下代码 style="display:none" onload="this.style.display = 'block';" 先让它不显 ...

  6. 用Webstorm 运行React-native 工程时，出错：xcrun: error: unable to find utility "instruments", not a developer tool or in PATH

    解决方法:在 终端执行如下命令 sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/ 注意:前提是你已经安装了xcode

  7. spring的开发

    spring与web的整合 1. 整合的原理: Spring容器随着tomcat容器ServletContext的启动而启动,并且在初始化完成后放到整个应用都可以访问的范围. ApplicationC ...

  8. 初次接触《C++程序设计原理与实践》一书

    前两天读书日,买了些书回来看.__Bjarne Stroustrup__的<C++程序设计原理与实践>便是其中一本.其实也没看完,只看了第0章-致读者,大师不愧是大师,只看了一章就让心生共 ...

  9. 数据库-identifying 与non-identifying realtionship 区别

    MySQL Workbench 或者是 E-RWin等进行数据库建模时,通常会对数据表进行关联操作,即设置表与表之间的关系 1:1 1:n m:n,而它们具有 identifying realtion ...

  10. 20165322 学习基础及C语言基础调查

    学习基础和C语言基础调查 一.技能学习经验 有什么技能比90%的人更好? 说来惭愧,我并不认为自己有什么技能能超过90%的人.我从小喜爱水彩画和推理解谜,在自己一些闲余时间的练习与学习下,应该可以超过 ...