所谓圣杯布局(三栏加页眉页脚)
一张图解释就是
1.浮动法
上中下:定宽定高
中间:左中右left浮动且都必须设置宽度 左:margin-left:-100% 右:margin-left:-100px: 中content:margin: 0 180px 0 150px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrap{
width: 80%;
margin: 0 auto;
}
#header{
height: 100px;
background: #66ccff;
}
#main{
height: 500px;
background: #ffcccc;
}
#footer{
height: 150px;
background: #99ccff;
}
#middle{
width: 100%;
float: left;
}
#left{
float: left;
width: 150px;
height: 100%;
margin-left: -100%;
background: #ccffff;
}
#right{
float: left;
width: 180px;
height: 100%;
margin-left: -180px;
background: #ccffff;
}
.content{
height:500px;
margin: 0 180px 0 150px
}
</style>
</head>
<body>
<header id="header" class="wrap">#header</header>
<section id="main" class="wrap">
<section id="middle">
<div class="content">content</div>
</section>
<aside id="left">left</aside>
<aside id="right">right</aside>
</section>
<footer id="footer" class="wrap">#footer</footer>
</body>
</html>
2.flex方法
上中下:定宽高
左中右 :flex布局 left和right:flex:0 0 200px 中flex 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrap{
margin:0 auto;
width:70%;
}
#header{
height:100px;
background: #66ccff;
}
#main{
height:500px;
background: #ffcccc;
display: flex
}
#footer{
height:100px;
background: #99ccff;
}
#middle{
flex: 1
}
#left{
flex: 0 0 200px;
background: #ccffff;
order: -1;
}
#right{
flex: 0 0 200px;
background: #ccffff;
}
</style>
</head>
<body>
<header id="header" class="wrap">#header</header>
<section id="main" class="wrap">
<section id="middle">#middle</section>
<aside id="left">#left</aside>
<aside id="right">#right</aside>
</section>
<footer id="footer" class="wrap">#footer</footer>
</body>
</html>
3.flex阮一峰实现方法
上中下也是flex布局,不同的是,总会撑满一屏。因为最外层HolyGrail:min-height: 100vh;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,
footer {
flex: 1;
background: #ffcccc;
}
.HolyGrail-body {
display: flex;
flex: 0 0 500px;
}
.HolyGrail-content {
flex: 1;
background: red;
}
.HolyGrail-nav,
.HolyGrail-ads {
/* 两个边栏的宽度设为12em */
flex: 0 0 12em;
background: #99ccff;
}
.HolyGrail-nav {
/* 导航放到最左边 */
order: -1;
}
</style>
</head>
<body class="HolyGrail">
<header>...</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">...</main>
<nav class="HolyGrail-nav">...</nav>
<aside class="HolyGrail-ads">...</aside>
</div>
<footer>...</footer>
</body>
</html>