一般header和footer 是高度固定的，屏幕充满的话可以选择绝对定位，子元素就可以使用百分比了，楼主只给了固定高度的样式，没有给使用百分比设置的样式，怎么修改还是要看具体情况
圣杯布局body {
margin: 0 auto;
position: relative;
width: 600px;
}
header, footer {
width: 600px;
height: 50px;
background-color: cyan;
margin: 0 auto;
border: 10px solid #ffff00;
text-align: center;
}
header {
position: absolute;
top: 0;
}
footer {
position: absolute;
bottom: 0;
}
.col {
position: absolute;
top: 70px;
bottom: 70px;
width: 600px;
border: 10px solid #000000;
margin: 0 auto;
text-align: center;
}
.left {
width: 100px;
height: 100%;
background-color: lime;
float: left;
margin-top: -500px;
}
.center {
height: 500px;
background-color: mediumorchid;
box-sizing: border-box;
padding: 0 100px;
}
.right {
width: 100px;
height: 500px;
background-color: red;
float: right;
margin-top: -500px;
}
我是顶部
我是中间
我是左部
我是右部
我是底部