IInterest'Blog

昨天转了篇多列等高的文章:Equal Height Columns with Cross-Browser CSS and No Hacks(译:纯 CSS 无 Hack 跨浏览器的多列等高),虽然介绍的方法实现起来比较复杂,但Matthew James Taylor的创新思维还是值得学习,借助作者的思路,自己写了个比较简化的例子.

先来看看实例:(兼容IE6-8,FF,OPERA等主流的浏览器)

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>iinterest</title> <style type="text/css"> *{ margin:0; padding:0;} .wrapper{ width:960px; margin:0 auto; background:#6CF; overflow:hidden;} .sidebar-bg{ float:left; width:100%; margin-left:600px; background:#FC3;} .main{ float:left; width:600px; margin-left:-600px;} .sidebar{ float:left; width:360px;} /* IE6 hack*/ * html .sidebar-bg{ display:inline; } * html .main{ position:relative; display:inline; z-index:1;} </style> </head> <body> <div class="wrapper"> <div class="sidebar-bg"> <div class="main"> <p> main<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br /> </p> </div> <div class="sidebar"> <p> sidebar<br />1<br />2<br />3<br />4<br /> </p> </div> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

与作者的思路是一样的,只是改用margin来实现

再介绍一种更为简洁的方法:

实例:(兼容:同上…^_^)

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>iinterest</title> <style type="text/css"> *{ margin:0; padding:0;} .wrapper{ width:960px; margin:0 auto; overflow:hidden;} .main{ float:left; width:300px; background:#6CF; padding-bottom:32767px; margin-bottom:-32767px;} .sidebar{ float:left; width:360px; background:#FC3; padding-bottom:32767px; margin-bottom:-32767px;} .sidebar-sub{ float:left; width:300px; background:#6C3; padding-bottom:32767px; margin-bottom:-32767px;} </style> </head> <body> <div class="wrapper"> <div class="main"> <p> main<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br /> </p> </div> <div class="sidebar"> sidebar<br />1<br />2<br />3<br />4<br /> </div> <div class="sidebar-sub"></div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

一些必要的解释:

1.原理:利用padding-bottom将列的高拉长(padding内是可以实现background属性的)，而负的margin-bottom又使其回到底部开始的位置(使显示的内容回到开头的位置)，同时，溢出部分隐藏掉了。

2.padding-bottom:32767px; 其实padding-bottom的值可以随意点,只要大于你页面的高度就行,之所以用32767是因为int的最大正值就是32767,没有比这个更大的了,所以用着省心,呵呵

纯CSS跨浏览器的多列等高(2)

2 Responses to 纯CSS跨浏览器的多列等高(2)

发表评论取消回复

搜索

分类

近期文章

文章

HTML5相关

在线工具

功能