css实现圣杯布局的四种方式

圣杯布局如下图指的是两端宽度固定，中间自适应。在日常开发中，圣杯布局的使用频率是比较高的。

本篇文章整理了几种圣杯布局的实现方式，欢迎各位大佬进行补充。

在线试一试
在这里插入图片描述
HTML代码

 <body class="holy-grail">
    <header>header</header>
    <div class="holy-grail-body">
      <nav class="holy-grail-nav">left</nav>
      <main class="holy-grail-content">content</main>
      <aside class="holy-grail-ads">right</aside>
    </div>
    <footer>footer</footer>
  </body>复制

利用float

这种方法实现起来比较麻烦，需要设置float: left;，配合负margin来实现。

实现

 .holy-grail {
  min-height: 100vh;
  padding: 0;
  margin: 0;
  text-align: center;
  color: #fff;
}
 
.common {
  float: left;
  height: calc(100vh - 120px);
}
 
header,
footer {
  height: 60px;
  line-height: 60px;
  background-color: #7dbcea;
}
 
footer {
  clear: both;
}
 
.holy-grail-body {
  padding: 0 200px;
}
 
.holy-grail-content {
  width: 100%;
  background-color: rgba(16, 142, 233, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.holy-grail-nav,
.holy-grail-ads {
  background-color: #3ba0e9;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.holy-grail-nav {
  margin-left: -200px;
}
 
.holy-grail-ads {
  margin-right: -200px;
}
 复制

利用position定位

利用position定位实现比利用float能简单一些，设置position: absolute;，利用left、right、bottom、top来自适应

实现

 .holy-grail {
  position: relative;
  padding: 0;
  margin: 0;
  min-height: 100vh;
  text-align: center;
  color: #fff;
}
 
header,
footer {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #7dbcea;
}
 
footer {
  position: absolute;
  bottom: 0;
}
 
.holy-grail-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  bottom: 60px;
}
 
.holy-grail-content {
  position: absolute;
  left: 180px;
  right: 180px;
  top: 0px;
  bottom: 0px;
  background-color: rgba(16, 142, 233, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.holy-grail-nav,
.holy-grail-ads {
  width: 180px;
  height: 100%;
  background-color: #3ba0e9;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.holy-grail-ads {
  position: absolute;
  right: 0;
  top: 0;
}复制

利用flex布局

利用flex实现相对会比较简单。
设置父组件display: flex;。
横向布局时，设置左右宽度，content设置flex: 1;，使其自适应。
纵向布局时，设置上下高度，中间设置flex: 1;，使其自适应。

实现

CSS代码

 .holy-grail {
  padding: 0;
  margin: 0;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  text-align: center;
  color: #fff;
}
 
header,
footer {
  flex: 0 0 60px;
  line-height: 60px;
  background-color: #7dbcea;
}
 
.holy-grail-body {
  display: flex;
  flex: 1;
}
 
.holy-grail-content {
  flex: 1;
  background-color: rgba(16, 142, 233, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.holy-grail-nav,
.holy-grail-ads {
  flex: 0 0 180px;
  background-color: #3ba0e9;
  display: flex;
  align-items: center;
  justify-content: center;
}复制

利用grid布局

利用flex实现是最简单的。
设置组件display: flex;。
横向布局时，设置grid-template-columns: 180px 1fr 180px;，设置1fr使其自适应。
纵向布局时，设置grid-template-rows: 60px 1fr 60px;即可。

实现

 .holy-grail {
  padding: 0;
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 60px 1fr 60px;
  text-align: center;
  color: #fff;
}
 
header,
footer {
  line-height: 60px;
  background-color: #7dbcea;
}
 
.holy-grail-body {
  display: grid;
  grid-template-columns: 180px 1fr 180px;
}
 
.holy-grail-content {
  background-color: rgba(16, 142, 233, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.holy-grail-nav,
.holy-grail-ads {
  background-color: #3ba0e9;
  display: flex;
  align-items: center;
  justify-content: center;
}
 复制

标签

css实现圣杯布局的四种方式

利用float

实现

利用position定位

实现

利用flex布局

实现

利用grid布局

实现

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

【简单html静态网页代码】制作一个简单HTML宠物网页（HTML CSS）

【html】新建一个html并且在浏览器运行

前端哥

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

解决npm install 报错 “npm err code 1“

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<body class="holy-grail">
	<header>header</header>
	<div class="holy-grail-body">
	<nav class="holy-grail-nav">left</nav>
	<main class="holy-grail-content">content</main>
	<aside class="holy-grail-ads">right</aside>
	</div>
	<footer>footer</footer>
	</body>

	.holy-grail {
	min-height: 100vh;
	padding: 0;
	margin: 0;
	text-align: center;
	color: #fff;
	}

	.common {
	float: left;
	height: calc(100vh - 120px);
	}

	header,
	footer {
	height: 60px;
	line-height: 60px;
	background-color: #7dbcea;
	}

	footer {
	clear: both;
	}

	.holy-grail-body {
	padding: 0 200px;
	}

	.holy-grail-content {
	width: 100%;
	background-color: rgba(16, 142, 233, 1);
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.holy-grail-nav,
	.holy-grail-ads {
	background-color: #3ba0e9;
	width: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	}
	.holy-grail-nav {
	margin-left: -200px;
	}

	.holy-grail-ads {
	margin-right: -200px;
	}

	.holy-grail {
	position: relative;
	padding: 0;
	margin: 0;
	min-height: 100vh;
	text-align: center;
	color: #fff;
	}

	header,
	footer {
	width: 100%;
	height: 60px;
	line-height: 60px;
	background-color: #7dbcea;
	}

	footer {
	position: absolute;
	bottom: 0;
	}

	.holy-grail-body {
	position: absolute;
	left: 0;
	right: 0;
	top: 60px;
	bottom: 60px;
	}

	.holy-grail-content {
	position: absolute;
	left: 180px;
	right: 180px;
	top: 0px;
	bottom: 0px;
	background-color: rgba(16, 142, 233, 1);
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.holy-grail-nav,
	.holy-grail-ads {
	width: 180px;
	height: 100%;
	background-color: #3ba0e9;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.holy-grail-ads {
	position: absolute;
	right: 0;
	top: 0;
	}

css实现圣杯布局的四种方式

利用float

实现

利用position定位

实现

利用flex布局

实现

利用grid布局

实现

微信扫一扫：分享