页脚的布局技巧

　　相信很多人遇见过同样的问题,在不同的显示器,14寸到30多寸的,页脚的显示成了一个大问题。

小屏幕显示的时候一切正常,换到大屏幕下,如果页面内容不够铺满整个屏幕,页脚就显示在屏幕中间

去了,这种情况往往会造成用户体验太糟糕。

　　本文是在 How to Use the Sticky Footer Code 的基础上根据工作中所遇见的情况,进行了

一点点扩展, 下面是 How to Use the Sticky Footer Code 提出纯css解决方法。

html:

<div id="wrap">

	<div id="header"></div>

	<div id="main"></div>

</div>

<div id="footer"></div>

css:

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
	padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;} 

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

完全参考上述的方法,显示的结果可能同我们想象的不太一样

为什么页脚没有到最下面呢?

通过检查不难发现,这里的body默认高度并不是屏幕高度

之所以出现这样的情况,是因为你没有设置body background,所以这里的高度100%是自适应的,所以出现这种情况要知道怎么处理!

 

　　但是很多情况下,页面是作为试图集成到框架的主题中去的,其中的main是会变化的,但是不能保证每个都是嵌入到 main 中的

这种情况下,就需要保证wrap子元素的最后一个一定要有 "padding-bottom: footer高度;" , 建议此处加入一个"垫子(mat)"层

修改后如下

html:

<div id="wrap">

	<div id="header"></div>

	<div id="main"></div>
  
  <div id="mat"></div>
  
</div>

<div id="footer"></div>

css:

html, body {height: 100%;}

#wrap {min-height: 100%;}

#mat {overflow:auto;
	padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;} 

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

 

这样在使用一些框架的时候, 集成视图的时候就不用担心wrap中的最后一个div不确定的情况了

 

如有错误,欢迎指出!　

 

转帖请申明此贴处(http://www.i-buffer.com)