当前位置:首页 > 开发 > Web前端 > 前端 > 正文

sticky footer 始终位于页面底部的footer

发表于: 2011-08-31   作者:chuckle_yue   来源:转载   浏览次数:
摘要: 做ui 已经有段时间,今天终于觉得把一些心得写出来,希望能帮助和我一样在前段努力的人,也希望得到大家的指导。   今天就来说一说这个footer吧。   每个网页都有footer,但是有时候页面内容太少,footer在页面中央显示是在不太好看。怎么样才能使footer始终位于页面的底部呢。在网上查了很多资料,现在总结一下吧。   看代码之前还是先说明一下缺

做ui 已经有段时间,今天终于觉得把一些心得写出来,希望能帮助和我一样在前段努力的人,也希望得到大家的指导。

 

今天就来说一说这个footer吧。

 

每个网页都有footer,但是有时候页面内容太少,footer在页面中央显示是在不太好看。怎么样才能使footer始终位于页面的底部呢。在网上查了很多资料,现在总结一下吧。

 

看代码之前还是先说明一下缺点吧。

 

  • footer的高度必须固定。
  • 在ie8的docucment mode是standards模式的时候,如果只能纵向改变浏览器的大小(横向不能同时变化),footer不能跟着往下走。

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			html,body{
				height:100%;
			}
			body{
				width:980px;
				margin:0 auto;
			}
			.lastChild{
				margin-bottom:0;
			}
			.firstChid{
				margin-top:0;
			}
			h1{
				text-align:center;
			}
			.wrapper{
				height:auto !important;
				min-height:100%;
				height:100%;
				margin:0 auto -85px;
			}
			.wrapper .content{
				padding-bottom:85px;
			}
			.copyRight{
				background:#457FCC;
				height:100%;
			}
			.footer{
				height:85px;
				margin:-85px 0 0;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="content">
				<h1 class="firstChid">Sticky footer</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p class="lastChild">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>
		<div class="footer">
			<p class="copyRight lastChild firstChid">this is the copy right part</p>
		</div>
	</body>
</html>
 

sticky footer 始终位于页面底部的footer

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
问题描述: 在页面中可能有这样的footer,我们期望它永远在页面的最下方。 当页面高度足够的时候,
问题描述: 在页面中可能有这样的footer,我们期望它永远在页面的最下方。 当页面高度足够的时候,
问题描述: 在页面中可能有这样的footer,我们期望它永远在页面的最下方。 当页面高度足够的时候,
1 static void SetAllHeaderFooter(string inputPath) 2 { 3 4 PdfReader reader=new PdfReader(inp
Titanium实现Footer和Header 的方法,很简单将界面分为三部分,头部,内容,底部。分为三个View即可
Titanium实现Footer和Header 的方法,很简单将界面分为三部分,头部,内容,底部。分为三个View即可
Titanium实现Footer和Header 的方法,很简单将界面分为三部分,头部,内容,底部。分为三个View即可
Titanium实现Footer和Header 的方法,很简单将界面分为三部分,头部,内容,底部。分为三个View即可
如果这么写footer的话 <div data-role="footer"> <a href="http://www.jqdemo.com" data-t
在gridview的RowCreated的事件里面写下如下代码 if (e.Row.RowType == DataControlRowType.Footer)
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号