<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-size: 14px;
}
.wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
text-align: center;
vertical-align: middle;
}
.wrapper header {
font-size: 1.1428em;
flex: 0 0 5.428em;
line-height: 5.428em;
background-color: #666;
}
.wrapper .content {
display: flex;
flex: 1;
}
.wrapper .content nav {
flex: 0 0 21.428em;
background-color: #77bbdd;
}
.wrapper .content main {
flex: 1;
background-color: #d6d6d6;
}
.wrapper .content aside {
flex: 0 0 12em;
background-color: #ff6633;
}
.wrapper footer {
flex: 0 0 3.571em;
line-height: 3.571em;
background-color: #666;
}
</style>
</head>
<body>
<div class="wrapper">
<header>Come and fine me</header>
<div class="content">
<nav>#Left</nav>
<main>#Center</main>
<aside>#Right</aside>
</div>
<footer>To be or not to be.</footer>
</div>
</body>
</html>
参考文章