圣杯布局的实践

最新推荐文章于 2025-06-03 09:19:53 发布

原创最新推荐文章于 2025-06-03 09:19:53 发布 · 121 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #HTML

Web前端专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的三栏布局方法，能够使三个栏目高度自适应，并针对IE6和IE7浏览器进行了兼容性修复。

原文地址：http://www.alistapart.com/articles/holygrail
实践了一下；


<div id=”header”></div>
<div id=”container”>
		<div id=”center”></div>
     <div id=”left”></div>
     <div id=”right”></div>
</div>
<div id=”footer”></div>

CSS:


        body{min-width:550px;margin:0px;padding:0px}
	#container{
		padding-left:200px;
		padding-right:150px;
	}
	#container .column{
		position:relative;
		float:left;
	}
	#center{
		width:100%;
		background:#ccc;
	}
	#left{
		width:200px;
		background:red;
		margin-left:-100%;
		right:200px;
	}
	#right{
		width:150px;
		background:blue;
		margin-right:-150px;
	}
	#footer{
		clear:both;
		background:#000;
	}
        /*** IE6 Fix***/
	* html #left{left:150px;}
	/*** IE7 Fix***/
	*:first-child+html #left{left:150px}

这样能实现最简单的三栏布局，并且三栏的高度自适应，根据里面的内容来定。最后是对IE6和IE7的修复.

如果想实现三栏一样高，并且加上padding,使得页面更加美观，那么需要这样写css。


body{min-width:630px;margin:0px;padding:0px}
	#container{padding-left:200px;padding-right:190px;overflow:hidden;}
	#container .column{padding-bottom:20010px;margin-bottom:-20000px;
position:relative;float:left;}
	#center{padding:10px 20px;width:100%;background:#ccc;}
	#left{width:180px;padding:0 10px;background:red;margin-left:-100%;right:240px;}
	#right{width:130px;padding:0 10px;background:blue;margin-right:-190px;}
	#footer{clear:both;background:#000;}
    /*** IE6 Fix***/
	* html #left{left:150px;}
	* html body{overflow:hidden;}
	* html #footer-wrapper{
		float:left;
		position:relative;
		width:100%;
		padding-bottom:10010px;
		margin-bottom:-10000px;
		background:#fff
	}
	/*** IE7 Fix***/
	*:first-child+html #left{}
	*:first-child+html body{overflow:hidden;position:relative}
	*:first-child+html #footer-wrapper{
		float:left;
		position:relative;
		width:100%;
		padding-bottom:10010px;
		margin-bottom:-10000px;
		background:#fff;
	}