HTML中footer固定在页面底部的若干种方法
<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固定在页面底部的若干种方法的更多相关文章
- 让footer固定在页面底部(CSS-Sticky-Footer)
让footer固定在页面底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...
- 解决Web开发HTML页面中footer保持在页面底部问题
如图所示如何实现footer在内容不足或者浏览器窗口变大变小的时候一直保持在底部呢?请看如下两种解决方案. 第一种方案: footer高度固定+绝对定位 (兼容性比较好完美兼容IE8+)思路:foot ...
- footer固定在页面底部的实现方法总结
方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...
- 在不适用fixed的前提下,当内容较少时footer固定在页面底部
使用css,参考国外的一个解决方法: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ How to use the CSS ...
- Footer固定在页面底部(CSS)
<style type="text/css"> #wapper{ position: relative; /*重要!保证footer是相对于wapper位置绝对*/ h ...
- 利用CSS使footer固定在页面底部
1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...
- 如何将页脚固定在页面底部,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部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...
随机推荐
- git获取别人远程dev分支上的代码
我们在使用 git clone xxx.git 下载代码的时候,获取到的只是 master上的代码 假入有个 dev 分支我们想获取上面的代码怎么办! #下载dev分支上的代码并切换到dev分支 g ...
- jquery 获取easyui combobox选中的值、赋值
jquery easyui combobox 控件支持单选和多选 1.获取选中的值 $('#comboboxlist').combobox('getValue'); //单选时 $('#combob ...
- WPF的项目,ListBox 纵向滚动条不显示
最近在做WPF的项目,ListBox 纵向滚动条不显示,但是鼠标滚轮可以在ListBox中使用,但是必须要出现纵向滚动条. 索性就直接在listBox外面包裹一个ScrollViewer. Scro ...
- 探寻hashmap
Hashmap源码 1. 构造器: a)获得默认数组大小:1>>4 :16 b) 获得负载因子:0.75:衡量hashmap的空间使用程度 i.过大:使用空间更加充分,但是查找效率变低, ...
- vue使用qrcode生成二维码,可以自定义大小
1,qrcanvas-vue插件,https://gera2ld.github.io/qrcanvas-vue/#logo.只支持像素大小的二维码 2,qrcode支持移动端自定义大小二维码 &quo ...
- Node.js 操作Mongodb
Node.js 操作Mongodb1.简介官网英文文档 https://docs.mongodb.com/manual/ 这里几乎什么都有了MongoDB is open-source docum ...
- RBG灯颜色渐变(颜色要尽可能多)程序分析
相信很多调过RBG灯的朋友都是通过分别改变R.B.G的占空比来改变颜色的,但是不是发现了一个问题,那就是不管怎样调都很难实现几十种颜色的变化,一般只有是7种颜色的渐变.下面给朋友们分享一个可以实现几十 ...
- haproxy学习——安装(一)
安装包:haproxy-1.5.4.tar.gz (挺小的,大约1.3M) ①.首先要sz到本地虚拟机上(centos-6.5),tar zxvf haproxy-1.5.4.tar.gz,完成解压. ...
- Struts2学习-拦截器
1.新建项目user4,建立好和user3一样的目录,与之相比只是添加几个类,主要是struts.xml和action类的改变,其结果没有太大的变化 struts,xml <?xml versi ...
- 小于12px的字体大小在Chrome中不起作用
今天遇见一个小问题,让人挺郁闷的,在Chrome浏览器中无法把字体变成12px以下.网上搜索以下,发现无论中文英文数字在网页中CSS设置小于12px后各大浏览器均支持,在谷歌chrome浏览器不支持解 ...