<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. git获取别人远程dev分支上的代码

    我们在使用 git clone  xxx.git 下载代码的时候,获取到的只是 master上的代码 假入有个 dev 分支我们想获取上面的代码怎么办! #下载dev分支上的代码并切换到dev分支 g ...

  2. jquery 获取easyui combobox选中的值、赋值

    jquery easyui combobox 控件支持单选和多选 1.获取选中的值 $('#comboboxlist').combobox('getValue');  //单选时 $('#combob ...

  3. WPF的项目，ListBox 纵向滚动条不显示

    最近在做WPF的项目,ListBox 纵向滚动条不显示,但是鼠标滚轮可以在ListBox中使用,但是必须要出现纵向滚动条.  索性就直接在listBox外面包裹一个ScrollViewer. Scro ...

  4. 探寻hashmap

    Hashmap源码 1.  构造器: a)获得默认数组大小:1>>4 :16 b) 获得负载因子:0.75:衡量hashmap的空间使用程度 i.过大:使用空间更加充分,但是查找效率变低, ...

  5. vue使用qrcode生成二维码，可以自定义大小

    1,qrcanvas-vue插件,https://gera2ld.github.io/qrcanvas-vue/#logo.只支持像素大小的二维码 2,qrcode支持移动端自定义大小二维码 &quo ...

  6. Node.js 操作Mongodb

    Node.js 操作Mongodb1.简介官网英文文档  https://docs.mongodb.com/manual/  这里几乎什么都有了MongoDB is open-source docum ...

  7. RBG灯颜色渐变（颜色要尽可能多）程序分析

    相信很多调过RBG灯的朋友都是通过分别改变R.B.G的占空比来改变颜色的,但是不是发现了一个问题,那就是不管怎样调都很难实现几十种颜色的变化,一般只有是7种颜色的渐变.下面给朋友们分享一个可以实现几十 ...

  8. haproxy学习——安装（一）

    安装包:haproxy-1.5.4.tar.gz (挺小的,大约1.3M) ①.首先要sz到本地虚拟机上(centos-6.5),tar zxvf haproxy-1.5.4.tar.gz,完成解压. ...

  9. Struts2学习-拦截器

    1.新建项目user4,建立好和user3一样的目录,与之相比只是添加几个类,主要是struts.xml和action类的改变,其结果没有太大的变化 struts,xml <?xml versi ...

  10. 小于12px的字体大小在Chrome中不起作用

    今天遇见一个小问题,让人挺郁闷的,在Chrome浏览器中无法把字体变成12px以下.网上搜索以下,发现无论中文英文数字在网页中CSS设置小于12px后各大浏览器均支持,在谷歌chrome浏览器不支持解 ...