The first: flex realizes adaptive three-column layout
<!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>
Type 2: Holy Grail layout
<!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>
The third type: double flying wing layout
<!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>
Note: The flex layout is the content of css3 and cannot be applied to lower version browsers. If compatible with lower version browsers, use Holy Grail layout or Double Flying Wing layout
Extension: box-sizing and calc are also the content of css3 and cannot appear in the holy grail layout and double flying wing layout