<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{margin:0px;padding:0px;}
#hd{
position:absolute;
top:0px;
width:100%;
height:100px;
background:#bbbbbb;
}
#bd{
position: absolute;
top:102px;
bottom:102px;
width:100%;
overflow:hidden;
}
#side{
position:absolute;
left:0px;
overflow:auto;
width:200px;
height:100%;
background:#999999;
}
#main{
position:absolute;
left:202px;
right:0px;
height:100%;
background:#888888;
overflow-y:auto;
}
#ft{
position:absolute;
bottom:0px;
width:100%;
height:100px;
background:#bbbbbb;
}
</style>
</head>
<body>
<div id="hd">头部</div>
<div id="bd">
<div id="side">左侧栏目</div>
<div id="main">
中间内容
</div>
</div>
<div id="ft">底部</div>
</body>
</html>
运行效果: