css 实现网页布局，上中下三部分，中间为固定宽度且分为左右两部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>布局</title>
<style>
html,body{
margin:0;
}
.topNav{
border:solid 1px red;
background: red;
position: fixed;
width:100%;
height:60px;
line-height:60px;
text-align: center;
color:#fff;
}
.centerContext{
border:solid 1px blue;
background: #ccc;
position: absolute;
width:1366px;
bottom: 40px;
top:60px;
text-align: center;
color:#fff; left:0;
right:0;
margin:0 auto;
z-index: -1;
}
.footer{
border:solid 1px green;
background: green;
height:40px;
line-height:40px;
position: fixed;
bottom: 0;
width:100%;
text-align: center;
color:#fff;
}
.left{
border:solid 1px #669ae1;
background: #669ae1;
width:300px;
float:left;
height:100%;
margin-bottom: 40px;
overflow: auto;
color:#fff;
}
.right{
border: solid 1px #1d5464;
height:100%;
background: #1d5464;
color:#fff;
overflow: auto;
margin-left: 300px;
}
.right div{height:1000px}
</style>
</head>
<body>
<div class="topNav">头部</div>
<div class="centerContext">
<div class="left">左边</div>
<div class="right">
<div >我是右边里面的内容我的高度是1000px</div>
</div>
</div>
<div class="footer">底部</div>
</body>
</html>
F`B$KX}WFR24N94T2Z%IVM2.png
上中下铺满全屏
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>布局</title>
<style>
html,body{margin:0}
.topNav{
border:solid 1px red;
background: red;
position: fixed;
width:100%;
height:60px;
line-height:60px;
text-align: center;
color:#fff;
}
.centerContext{
border:solid 1px blue;
background: #ccc;
position: absolute;
width:100%;
bottom: 40px;
top:60px;
text-align: center;
color:#fff;
left:0;
right:0;
margin:0 auto;
z-index: -1;
}
.footer{
border:solid 1px green;
background: green;
height:40px;
line-height:40px;
position: fixed;
bottom: 0;
width:100%;
text-align: center;
color:#fff;
}
.left{
border:solid 1px #669ae1;
background: #669ae1;
width:20%;
float:left;
height:100%;
margin-bottom: 40px;
overflow: auto;
color:#fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.right{
border: solid 1px #1d5464;
height:100%;
width:80%;
background: #1d5464;
color:#fff;
overflow: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
ox-sizing: border-box;
}
.right div{height:1000px}
</style>
</head>
<body>
<div class="topNav">头部</div>
<div class="centerContext">
<div class="left">左边</div>
<div class="right">
<div >我是右边里面的内容我的高度是1000px</div>
</div>
</div>
<div class="footer">底部</div>
</body>
</html>
![]NX$D)O7BNEG3DHEWG%2FYL.png](http://upload-images.jianshu.io/upload_images/2633055-c92e16f8494da62d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
