第一种：flex实现自适应三栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex实现自适应三栏式布局</title>
<style>
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
}
.header,.footer{
height: 80px;
background-color: aqua;
}
.content{
flex: 1;
background-color: darkcyan;
display: flex;
}
.main{
flex: 1;
background-color: chartreuse;
}
.left{
width: 200px;
min-height: 500px;
background-color: blueviolet;
}
.right{
width: 220px;
min-height: 400px;
background-color: brown;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="content">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
第二种：圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.clean:after{
content: ".";
display: block;
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
}
.header,.footer{
height: 80px;
background-color: aqua;
}
.content{
background-color: bisque;
padding: 0 220px 0 200px;
}
.main{
min-height: 400px;
background-color: blueviolet;
float: left;
width: 100%;
}
.left{
min-height: 300px;
width: 200px;
background-color: brown;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
min-height: 300px;
width: 220px;
background-color: cadetblue;
float: left;
margin-left: -220px;
position: relative;
left: 220px;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="content clean">
<!-- main写在前面可以优先加载 -->
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
第三种：双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.header,.footer{
height: 80px;
background-color: aqua;
}
.content{
width: 100%;
background-color: burlywood;
float: left;
}
.main{
min-height: 500px;
background-color: blueviolet;
margin: 0 200px 0 220px;
}
.left{
width: 220px;
min-height: 400px;
background-color: chartreuse;
float: left;
margin-left: -100%;
}
.right{
width: 200px;
min-height: 280px;
background-color: cornflowerblue;
float: left;
margin-left: -200px;
}
.footer{
/* 清除content、left和right浮动带来的影响 */
clear: both;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="content">
<div class="main">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="footer">footer</div>
</body>
</html>
注意：flex布局是css3的内容，不能适用于低版本浏览器。如果兼容低版本浏览器，使用圣杯布局或者双飞翼布局
扩展：box-sizing和calc也是css3的内容，不能在圣杯布局和双飞翼布局中出现