<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style media="screen">
.HolyGrail {
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,
footer {
background: red;
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;
}
/*如果是小屏幕，躯干的三栏自动变为垂直叠加。*/
@media (max-width: 768px) {
.HolyGrail-body {
flex-direction: column;
flex: 1;
}
.HolyGrail-nav,
.HolyGrail-ads,
.HolyGrail-content {
flex: auto;
}
}
</style>
</head>
<body class="HolyGrail">
<header>头部</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content" style="background: blue;">中</main>
<nav class="HolyGrail-nav" style="background: orange;">左</nav>
<aside class="HolyGrail-ads" style="background: gray;">右</aside>
</div>
<footer>底部</footer>
</body>
</html>
大屏显示
小屏显示
