div+css经典布局方式
01 左右两侧，左侧固定宽度200px，右侧自适应占满
02 左中右三列，左右个200px固定，中间自适应占满
03 上中下三行，头部200px高，底部200px高，中间自适应占满
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<style>
cf:before, .cf:after {
content: " ";
display: table;
}
.fl{float: left;}
.fr{float: right;}
/**/
.box{
height: 60px;
background: #F5EAEA;
width: 80%;
margin: 0 auto;
}
.left{
width: 200px;
background: #BEE9EF;
height: inherit;
}
.right{
margin-left: 200px;
background: #DFF1E0;
height: inherit;
}
/**/
</style>
、
<style>
.wraper{
height: 90px;
background: #C9CFD2;
width: 80%;
margin: 0 auto;
}
.wraper-left{
height: inherit;
width: 200px;
float: left;
background: #F3ACA6;
}
.wraper-right{
height: inherit;
width: 400px;
float: right;
background: #A2CAEA;
}
/*cf:before, .cf:after {*/
.wraper-right:after{
height: inherit;
background: #F5DC93;
}
/* .wraper-center{
height: inherit;
background: #F5DC93;
} */
</style>
<!-- 上中下三行，头部200px高，底部200px高，中间自适应占满 -->
<style>
.szx-wraper{
width: 100%;
background: #ECE6E6;
}
.szx-wraper header{
width: 100%;
height: 200px;
position: absolute;
top: 0;
}
.szx-wraper footer{
width: 100%;
height: 200px;
position: absolute;
bottom: 0;
background: #87C6E2;
}
.szx-wraper .content-wraper{
width: 100%;
background: #F1EAB0;
position: absolute;
top: 200px;
bottom: 200px;
}
</style>
<div class="szx-wraper">
<header>
<!-- -->
<div class="box cf">
<div class="left fl"></div>
<div class="right"></div>
</div>
<!-- -->
<div class="wraper">
<div class="wraper-left"></div>
<div class="wraper-right"></div>
<!-- <div class="wraper-center"></div> -->
</div>
</header>
<div class="content-wraper"></div>
<footer></footer>
</div>
</body>
</html>