<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. 封装http请求键值对的js函数

    //封装http请求键值对的函数 function Map() { this.keys = new Array(); this.data = {}; //添加键值对 this.put = functi ...

  2. java程序: 从kernel.ubuntu.com下载kernel - HttpURLConnection

    用java实现从kernel.ubuntu.com下载内核的小工具 现在的最新的LTS版本是4.19,目前已经更新到4.19.13了. Kernel的更新通知里,经常有下面的陈述: 作为一个听劝的人, ...

  3. Redis过期设置

    Redis支持按key设置过期时间,过期后值将被删除(在客户端看来是补删除了的) 用TTL命令可以获取某个key值的过期时间(-1表示永不过期) 127.0.0.1:6379> set name ...

  4. 转-vs2017安装并且安装包不占用C盘空间

    平常的安装方式,不论是在线安装还是下载的离线安装包,都会在安装过程中将vs2017的安装包保存在C:\ProgramData\Microsoft\VisualStudio\Packages文件夹下并占 ...

  5. 基于CSS3的3D旋转效果

    自从有了html5和css3,好多以前只能想想的华丽效果都可以上手实现了.3D 转换(个人认为3D变换更贴切^)就是其中之一.关于3D转换,可以阅读CSS3 3D transform变换,不过如此,文 ...

  6. 【代码笔记】Java Web初入:XML的进一步深入了解

    2015-12-25 文件名    guojia.xml <?xml version="1.0" encoding="GB2312"?> <! ...

  7. JS图片赖加载例子

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JavaScript数组常见操作

    JavaScript数组常见操作 Tip: 右键在新标签中打开查看清晰大图 下面介绍JavaScript中的数组对象遍历.读写.排序等操作以及与数组相关的字符串处理操作 创建数组 一般使用数组字面量[ ...

  9. 华为OJ-表示数字

    要求:将一个字符中所有出现的数字前后加上符号"*",其他字符保持不变 #include<iostream> #include<string> using n ...

  10. Selenium2学习（十）-- iframe定位

    前言 有很多小伙伴在拿163作为登录案例的时候,发现不管怎么定位都无法定位到,到底是什么鬼呢,本篇详细介绍iframe相关的切换 以http://mail.163.com/登录页面10为案例,详细介绍 ...