圣杯布局如下图指的是两端宽度固定，中间自适应。在日常开发中，圣杯布局的使用频率是比较高的。
本篇文章整理了几种圣杯布局的实现方式，欢迎各位大佬进行补充。
在线试一试
HTML代码
<body class="holy-grail">
<header>header</header>
<div class="holy-grail-body">
<nav class="holy-grail-nav">left</nav>
<main class="holy-grail-content">content</main>
<aside class="holy-grail-ads">right</aside>
</div>
<footer>footer</footer>
</body>
利用float
这种方法实现起来比较麻烦，需要设置float: left;，配合负margin来实现。
实现
.holy-grail {
min-height: 100vh;
padding: 0;
margin: 0;
text-align: center;
color: #fff;
}
.common {
float: left;
height: calc(100vh - 120px);
}
header,
footer {
height: 60px;
line-height: 60px;
background-color: #7dbcea;
}
footer {
clear: both;
}
.holy-grail-body {
padding: 0 200px;
}
.holy-grail-content {
width: 100%;
background-color: rgba(16, 142, 233, 1);
display: flex;
align-items: center;
justify-content: center;
}
.holy-grail-nav,
.holy-grail-ads {
background-color: #3ba0e9;
width: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.holy-grail-nav {
margin-left: -200px;
}
.holy-grail-ads {
margin-right: -200px;
}
利用position定位
利用position定位实现比利用float能简单一些，设置position: absolute;，利用left、right、bottom、top来自适应
实现
.holy-grail {
position: relative;
padding: 0;
margin: 0;
min-height: 100vh;
text-align: center;
color: #fff;
}
header,
footer {
width: 100%;
height: 60px;
line-height: 60px;
background-color: #7dbcea;
}
footer {
position: absolute;
bottom: 0;
}
.holy-grail-body {
position: absolute;
left: 0;
right: 0;
top: 60px;
bottom: 60px;
}
.holy-grail-content {
position: absolute;
left: 180px;
right: 180px;
top: 0px;
bottom: 0px;
background-color: rgba(16, 142, 233, 1);
display: flex;
align-items: center;
justify-content: center;
}
.holy-grail-nav,
.holy-grail-ads {
width: 180px;
height: 100%;
background-color: #3ba0e9;
display: flex;
align-items: center;
justify-content: center;
}
.holy-grail-ads {
position: absolute;
right: 0;
top: 0;
}
利用flex布局
利用flex实现相对会比较简单。
设置父组件display: flex;。
横向布局时，设置左右宽度，content设置flex: 1;，使其自适应。
纵向布局时，设置上下高度，中间设置flex: 1;，使其自适应。
实现
CSS代码
.holy-grail {
padding: 0;
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
text-align: center;
color: #fff;
}
header,
footer {
flex: 0 0 60px;
line-height: 60px;
background-color: #7dbcea;
}
.holy-grail-body {
display: flex;
flex: 1;
}
.holy-grail-content {
flex: 1;
background-color: rgba(16, 142, 233, 1);
display: flex;
align-items: center;
justify-content: center;
}
.holy-grail-nav,
.holy-grail-ads {
flex: 0 0 180px;
background-color: #3ba0e9;
display: flex;
align-items: center;
justify-content: center;
}
利用grid布局
利用flex实现是最简单的。
设置组件display: flex;。
横向布局时，设置grid-template-columns: 180px 1fr 180px;，设置1fr使其自适应。
纵向布局时，设置grid-template-rows: 60px 1fr 60px;即可。
实现
.holy-grail {
padding: 0;
margin: 0;
min-height: 100vh;
display: grid;
grid-template-rows: 60px 1fr 60px;
text-align: center;
color: #fff;
}
header,
footer {
line-height: 60px;
background-color: #7dbcea;
}
.holy-grail-body {
display: grid;
grid-template-columns: 180px 1fr 180px;
}
.holy-grail-content {
background-color: rgba(16, 142, 233, 1);
display: flex;
align-items: center;
justify-content: center;
}
.holy-grail-nav,
.holy-grail-ads {
background-color: #3ba0e9;
display: flex;
align-items: center;
justify-content: center;
}
