html圣杯框架布局,html+css布局之--圣杯布局

圣杯布局，就是两边定宽，中间自适应的三栏布局！今天把这个布局代码，码一下！看代码不作过多解释！代码很简单！

这是header!

这是Left

这是Content!

这是Right!

这是Footer!

* {

margin: 0;

padding: 0;

}

#parents {

width: 100%;

margin: 0 auto;

background: #ccc;

}

#left,

#content,

#right {

padding-bottom: 2000px; //2000像素的补偿

margin-bottom: -2000px;

}

#main {

padding-left: 100px;

padding-right: 150px;

overflow: hidden;

}

#top {

background: #666;

}

#left {

background: #E79F6D;

float: left;

width: 100px;

position: relative;

left: -100px;

}

#content {

background: #D6D6D6;

float: left;

width: 100%;

margin-left: -100px;

}

#right {

background: #77BBDD;

float: left;

width: 150px;

margin-left: -150px;

position: relative;

left: 150px;

}

#foot {

background: #666;

clear: both;

}

提示：自己动手试一下，效果会更好！