DOM结构:
<div id="header">header</div>
<div id="container">
<div id="main" class="column">content</div>
<div id="left" class="column">left-aside</div>
<div id="right" class="column">right-aside</div>
</div>
<div id="footer">footer</div>
一般我们习惯将main中间主体部分放在最前面,这样我们在使用position定位的时候方便计算左右侧边栏需要移动的距离。
CSS代码块:
可以先将头部和底部设置好,很多布局方法的不同,主要体现在container部分,其余部分实现方法一致。
基本设置如下:
@charset "utf-8";
html,body,div{
margin:0;
padding:0;
}
html,width{
width:100%;
heigth:100%;
}
#header,#footer{
background-color:#eee;
height:80px;
width:100%;
}
头部和底部设置好后,我们再来设置container部分,圣杯布局的主要思想是将container单做一个盒子,使用padding-left,padding-right将两边空出一定的距离,用以存放左右侧边栏。
#container{
padding-left:200px;
padding:right:200px;
}
空出位置后,对main,left,right使用float:left浮动,方便之后的定位
#main,.column{
float:left;
}
#left,#right{
width:200px;
height:300px;
}
#left{
background-color:red;
}
#right{
background-color:orange;
}
#content{
width:100%;
height:500px;
background-color:#aaa;
}
#footer{
clear:both;/*清楚浮动*/
}
效果如下:
到了这一步布局基本已经实现,现在只需要将left,right移动到两端就可以了。在这里使用position:relative定位
#left{
position:relative;
margin-left:-100%;
}
效果如下:
因为前面使用了float:left,使得元素浮动,left,right之所以会如图一中换行显示,是因为content占据了main除padding之外的宽度。
最后部分代码如下:
#left{
position:relative;
margin-left:-100%;
left:-200px;
}
#right{
position:relative;
margin-right:-200px;
}
效果图如下:
最后可以在中间加一个最小宽度min-width。