2列右窄左宽、高度自适应且未知高度底部平齐+头部+导航+尾部——www.poluoluo.com


  此例是当左右侧高度都不固定时,实现底部平齐的方法。目前采用背景图片的方法是最简单和快捷的方法了。

  制作一个和sidebar宽度相同、颜色相同的1px高背景图片,把它应用在mainContent上,然后向y轴方向重复,采用欺骗的方式来实现未知高度底部平齐,当然还有很多种其它的解决方法。细心的朋友可能已经发现,在mainContent样式表里有个 overflow:auto;zoom:1;的属性,overflow:auto;是让mainContent来自适应内部容器的高度,zoom:1;是为了兼容IE6而使用的CSS HACK。zoom:1;通不过W3C的验证,这也是遗憾的一点,幸好IE支持<!--[if IE]>这种写法,可以专门针对IE来写单独的样式,所以可以把这个属性写在页面内的<!--[if IE]>中,这样应该可以通过验证了。

  总之,实现的方法是多种多样的,这只是本人在学习过程中总结的一点经验,权当抛砖引玉,希望能对您有所帮助,当然您有更好的办法和布局,欢迎一块来学习,交流,让web标准在中国得到更好的发展。