版权声明：黄菊华 https://blog.csdn.net/u013818205/article/details/87929150
圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
HTML代码如下
<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>
CSS代码如下
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,
footer {
flex: 1;
}
.HolyGrail-body {
display: flex;
flex: 1;
}
.HolyGrail-content {
flex: 1;
}
.HolyGrail-nav, .HolyGrail-ads {
/* 两个边栏的宽度设为12em */
flex: 0 0 12em;
}
.HolyGrail-nav {
/* 导航放到最左边 */
order: -1;
}
实战效果图
实战代码
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圣杯布局</title>
</head>
<style>
.rongqi{display:flex; flex-direction:column; background-color:#9CF; min-height:100vh;}
.tou{ background-color:#CCC; height:60px;}
.zhong{ background-color:#396;flex:1; display:flex;}
.di{ background-color:#999; height:60px;}
.c01{ background-color:#FC3;}
.c02{ background-color:#C63; flex:1;}
.c03{ background-color:#C6C;}
</style>
<body class="rongqi">
<div class="tou">头部</div>
<div class="zhong">
<div class="c01">左边</div>
<div class="c02">
圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
</div>
<div class="c03">右边</div>
</div>
<div class="di">底部</div>
</body>
</html>
欢迎大家收看我的视频课程：Flex Box页面布局实战课程
https://edu.csdn.net/course/detail/16197
