由于阮一峰的写的圣杯布局，有点小问题：中间内容过少，造成显示样式不美观
原因：header和footer高度不固定(flex:1)
我就做了下修正，顺便也学习阮大神圣杯布局
HTML，为什么这样写，简单说就是语义化
好处：便于浏览器，搜索引擎解析
...
...
复制代码
style
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,
footer {
min-height: 80px;
}
.HolyGrail-body {
display: flex;
flex: 1;
}
.HolyGrail-content {
flex: 1;
}
.HolyGrail-left,
.HolyGrail-right {
flex: 0 0 100px;
}
.HolyGrail-left {
order: -1;
}
复制代码
效果：
源代码：
Document
html * {
margin: 0;
padding: 0;
}
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
background: #ddd;
}
header,
footer {
min-height: 80px;
background: green;
line-height: 80px;
text-align: center;
}
.HolyGrail-body {
display: flex;
flex: 1;
}
.HolyGrail-content {
flex: 1;
background: #f5f5d5;
}
.HolyGrail-left,
.HolyGrail-right {
flex: 0 0 12em;
display: flex;
justify-content: center;
align-items: center;
}
.HolyGrail-left {
order: -1;
}
header
HolyGrail-content
HolyGrail-content
nav
aside
footer
复制代码