html表格圣杯布局页面,关于HTML圣杯布局

FSYu

html>

* {

margin: 0;

padding: 0;

}

body {

min-width: 700px;

}

.top,

.bottom {

width: 100%;

height: 50px;

line-height: 40px;

background-color: #539D26;

margin: 0 auto;

float: left;

}

.zhong {

padding: 0 200px 0 200px;

}

.z,

.left,

.right {

position: relative;

float: left;

min-height: 300px;

}

.z {

background-color: #999999;

width: 100%;

}

.left {

width: 200px;

background-color: #00FFFF;

margin-left: -100%;

left: -200px;

}

.right {

width: 200px;

background-color: #00FF00;

margin-right: -200px;

}

头部

zhonga

 v

asdasdasd

zuo

you

尾部

var z = document.getElementsByClassName("z");

var he = z[0].offsetHeight;

var zhong = document.getElementsByClassName("zhong")[0];

var zuo = document.getElementsByClassName("left")[0];

var you = document.getElementsByClassName("right")[0];

zhong.style.height = he + "px";

zuo.style.height = he + "px";

you.style.height = he + "px";

中间的。两边的，还有父级都要有高度