<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. HTML5 总结 （1）

    HTML5新表单 1.Input 新类型:email  url  tel number range date color date week month....... <html> < ...

  2. Spring课程 Spring入门篇 5-2 配置切面aspect

    本节主要讲了在xml中配置切面的demo 1 解析 1.1 配置切面xml 1.2 配置切面xml 1.3 问:什么是动态代理? 2 代码演练 2.1 配置切面xml 1 解析 1.1 配置切面xml ...

  3. csharp: DataTable结构相同的比较

    )
 ) * pageSize;
 ; i++)
 {
 DataRow newdr = newdt.NewRow();
 DataRow dr = dt.Rows[i];
 foreach (Dat ...

  4. 【基础笔记】《html&CSS设计与构造网站》一书导读

    ◉HTML 1.结构网页使用HTML HyperText Markup Language 来描述页面结构超文本标记语言允许对文本建立链接,允许对文本进行标记网页开头都有一个DOCTYPE 文档类型 声 ...

  5. 使用Gulp压缩IMG

    继续说Gulp压缩img 不会安装Gulp的小伙伴们,就去看我的上一篇吧!内容怎么安装的都有! 1.咱们先来安装任务插件吧: npm install gulp-imagemin --save-dev ...

  6. wxpython 创建工具栏和菜单栏

    下面看一下关于创建工具栏,状态栏和菜单的方法,看下面一个例子: import wx class ToolBarFrame(wx.Frame): def __init__(self,parent,id) ...

  7. 使用sqlloader向oracle导入文本数据

    文本文件如下,注意文件名必须有后缀,文本行首也需要|分隔符:[oracle@ycr test]$ more person.txt|aaa|123|m|aaa|123|m|aaa|123|m|aaa|1 ...

  8. python入门2 python字符串换行显示、字符串太长\连接多行

    #coding:utf-8 #/usr/bin/python """ 2018-11-03 dinghanhua 缩进 换行 """ &qu ...

  9. IOS ASI 请求服务器 总结

    一.发送请求的2个对象 1.发送GET请求:ASIHttpRequest 2.发送POST请求:ASIFormDataRequest* 设置参数// 同一个key只对应1个参数值,适用于普通“单值参数 ...

  10. 【BZOJ4766】文艺计算姬（prufer序列）

    点此看题面 大致题意: 让你求一个两边各有\(n\)和\(m\)个点的完全二分图有多少个生成树. \(prufer\)序列 这是一道比较经典的利用\(prufer\)序列结论求解答案的计数题. 大致思 ...