html表格圣杯布局页面,Css圣杯布局

圣杯布局

html, body {

padding: 0;

margin: 0;

}

body {

min-width: 700px;

font-size: 24px;

}

#header, #footer {

width: 100%;

height: 30px;

line-height: 30px;

background-color: #909399;

text-align: center;

}

#container {

margin-left: 240px;

margin-right: 200px;

}

#container .column{

position: relative;

float: left;

height: 100px;

}

#center {

width: 100%;

background-color: #1890ff;

}

#left {

width: 240px;

background-color: #F56C6C;

margin-left: -100%;

left: -240px;

}

#right {

width: 200px;

background-color: #E6A23C;

margin-right: -200px;

}

.clearfix:after {

content: '';

display: table;

clear: both;

}

#header

#center

#left

#right

#footer