html中如何在页面底部增加,HTML中footer固定在页面底部的若干种方法

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

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

注：.main{

width:1050px;

margin:0 auto;

height:auto;

}

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

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

.footer{

position:fixed;

bottom:0;

left:0;

}

2、

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

footer需要固定在底部

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;}

头部文本

主体内容

底部文本

让footer固定在页面底部(CSS-Sticky-Footer)

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

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

方法一:footer高度固定+绝对定位 HTML代码:

头部中间内容

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

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

Footer固定在页面底部(CSS)

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

1.HTML基本结构

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

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

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

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

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

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

让footer固定在页面(视口)底部(CSS-Sticky-Footer)

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

随机推荐

poj1062 昂贵的聘礼

Description 年轻的探险家来到了一个印第安部落里.在那里他和酋长的女儿相爱了,于是便向酋长去求亲.酋长要他用10000个金币作为聘礼才答应把女儿嫁给他.探险家拿不出这么多金币,便请求酋长降低 ...

Android横竖屏切换继续播放视频

只需要重新onSaveInstanceState方法,在其里面记住我们要记录的参数 package com.bawei.day07_videoview; import android.os.Bundl ...

Machine Schedule(最小覆盖)

其实也是个最小覆盖问题 关于最小覆盖http://blog.csdn.net/u014665013/article/details/49870029 Description As we all kno ...

四则运算2+psp0级表格

四则运算2 一.题目和要求 题目:写一个能自动生成小学四则运算题目的程序,要求一次输出不少于30道,只能是整数100以内的四则运算(四则运算1升级版) 要求: 1.题目避免重复 2.可定制(数量/打印 ...

RPC之Thrift学习实战

关于Thrift的学习实战请参考:http://blog.csdn.net/column/details/slimina-thrift.html

Windows 7 mklink命令详解

mklink是Windows 7下的一个类似于linux下In的命令,其作用是在NTFS文件系统中创建文件或目录的链接(类似于桌面快捷方式).如果加以利用其发挥的作用是非常的大的,不仅可以帮助我们节省 ...

CAN总线与RS485的比较

CAN总线与RS485的比较 http://blog.csdn.net/reille/article/details/6135546 can总线与485总线有什么区别?  http://blog.16 ...

如何通过Maven的Tomcat插件运行Web工程

去tomcat官网http://tomcat.apache.org/,左侧栏Apache Tomcat下的Maven Plugin,点进去选择最新版本Version 2.2 通过介绍可知,使用tomc ...

Z-Stack - Modification of Zigbee Device Object for better network access management

写一份赏心悦目的工程文档,是很困难的事情.若想写得完善,不仅得用对工具(use the right tools),注重文笔,还得投入大把时间,真心是一件难度颇高的事情.但,若是真写好了,也是善莫大焉: ...