html页面布局设置外边距,布局 页面设置百分比 子元素如何设置外边距？

一般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;

}

我是顶部

我是中间

我是左部

我是右部

我是底部