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

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

nav

aside

footer

复制代码

html 圣杯布局高度,web圣杯布局相关推荐

css 左右布局高度自适应,CSS布局-高度自适应
前面一篇讲述了有关高度自适应的问题,现在来讨论下用CSS2来实现高度自适应的方式. 单个自适应当且只有个一个div的高度需要自适应时,我们可以使用以下方法,*{padding:0;margin:0; ...
后台管理页面布局、web页面布局
做一个简单的页面布局演示地址:https://genin.gitee.io/web-demo/web-layout.html 基本结构如下 <body> <!-- svg图标 -- ...
前端必经之路：CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
css多栏布局(双栏布局、三栏布局、圣杯布局、双飞翼布局)
1.两栏布局两栏布局的核心是左栏固定宽度,右栏宽度自适应 html结构为 <div class="outer"><div class="left&qu ...
CSS3——弹性盒模型-flex——等分布局、流式布局、圣杯布局(推荐阅读很棒)
1.等分布局: 中间固定两边自适应: 固定两个,一个自适应 2.流式布局: 模仿float浮动布局 3.圣杯布局:(自适应布局) 先来看一下结构布局: <div class="wrap ...
CSS3——弹性盒模型-flex——等分布局、流式布局、圣杯布局
1.等分布局: 中间固定两边自适应: 固定两个,一个自适应 2.流式布局: 模仿float浮动布局 3.圣杯布局:(自适应布局) 先来看一下结构布局: <div class="wrap ...
Web网页布局的主要方式
一.静态布局(static layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc ...
Web自适应布局你需要知道的所有事儿
有这样一个问题. 请说说你知道的所有web布局方式? 一般来说,有以下这些布局方法: 浮动 float:left|right inline-block display:inline-block fle ...
从web移动端布局到react native布局
在web移动端通常会有这样的需求,实现上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),如下图所示: 实现方法如下: HTML结构: <div class='container'&g ...
Web网页布局的主要方式 1
一.静态布局(static layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc ...

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

header

HolyGrail-content

HolyGrail-content

nav

aside

footer

html 圣杯布局高度,web圣杯布局相关推荐

最新文章

热门文章

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

header

HolyGrail-content

HolyGrail-content

nav

aside

footer

html 圣杯布局 高度,web圣杯布局相关推荐

最新文章

热门文章

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

html 圣杯布局高度,web圣杯布局相关推荐