版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Hreticent/article/details/80792534
头部底部固定，中间部分自适应高度，且中间部分包含左中右三部分，其中左右固定，中间自适应
<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
title>Title</
title>
<
style
type=
"text/css">
html,
body {
height:
100
%;
margin:
0;
padding:
0
}
.head,
.footer{
position:
absolute;
height:
50
px;
width:
100
%;
background:
pink;
}
.head{
top:
0;
}
.footer{
bottom:
0;
}
.left ,
.right{
position:
relative;
width:
100
px;
height:
100
%;
background-color:
lightblue;
}
.left{
float:
left;
}
.right{
float:
right;
}
.center{
position:
absolute;
left:
100
px;
right:
100
px;
height:
100
%;
background-color:
lightslategray;
}
.content{
position:
absolute;
top:
50
px;
bottom:
50
px;
width:
100
%;
}
</
style>
</
head>
<
body>
<
div
class=
"head"></
div>
<
div
class=
"content">
<
div
class=
"left"></
div>
<
div
class=
"center"></
div>
<
div
class=
"right"></
div>
</
div>
<
div
class=
"footer"></
div>
</
body>
</
html>
效果如下：
