html 圣杯布局 高度,web圣杯布局

由于阮一峰的写的圣杯布局，有点小问题：中间内容过少，造成显示样式不美观

原因：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

复制代码