圣杯布局终极版

最新推荐文章于 2022-01-19 21:27:00 发布

时光无声￡

最新推荐文章于 2022-01-19 21:27:00 发布

阅读量81

点赞数

分类专栏： CSS 文章标签：圣杯布局 css

本文链接：https://blog.csdn.net/weixin_44586981/article/details/119215890

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

圣杯布局
1.两边固定中间自适应
2.中间优先加载
3.中间完整显示(页面设置最小宽度 )

1. 别人想的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 
			 个人觉得这种方式麻烦!!!
			 */
			*{
				margin: 0;
				padding: 0;
			}
			body{
				min-width: 600px;
			}
			#wrap{
				padding: 0 200px;
				overflow: hidden;
			}
			#wrap > div{
				float: left;
			}
			
			#wrap > .middle{
				background-color: red;
				width: 100%;
			}
			#wrap > .left{
				
				width: 200px;
				background-color: pink;
				margin-left: -100%;
				position: relative;
				left: -200px;
				top: 0;
			}
			#wrap > .right{
				
				width: 200px;
				background-color: pink;
				margin-left: -200px;
				position: relative;
				right: -200px;
				top: 0;
			}
			
			.clearfix{
				*zoom: 1;
			}
			.clearfix::after{
				content: "";
				display: block;
				clear: both;
			}
			/* 等高布局 */
			#wrap > .middle,#wrap > .left,#wrap > .right{
				padding-bottom: 10000px;
				margin-bottom: -10000px;
			}
			
		</style>
	</head>
	<body>
		<div id="wrap" class="clearfix">
			<div class="middle">
				middle <br>
				middle <br>
				middle <br>
				middle <br>
				middle <br>
				middle <br>
				middle <br>
				middle <br>
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>
</html>

在这里插入图片描述

2. 自己想的(第一版)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 
			 圣杯布局
			 1.两边固定中间自适应
			 2.中间优先加载
			 3.页面设置最小宽度 中间完整显示
			 */
			*{
				margin: 0;
				padding: 0;
			}
			body{
				min-width: 600px;
			}
			#wrap{
				position: relative;
				overflow: hidden;
			}
			#wrap > .middle{
				background-color: red;
				margin-left: 200px;
				margin-right: 200px;
			}
			#wrap > .left{
				position: absolute;
				top: 0;
				left: 0;
				width: 200px;
				background-color: pink;
			}
			#wrap > .right{
				position: absolute;
				top: 0;
				right: 0;
				width: 200px;
				background-color: pink;
			}
			/* 
			 等高布局
			 */
			#wrap > .middle,#wrap > .left,#wrap > .right{
				padding-bottom: 10000px;
				margin-bottom: -10000px;
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="middle">
			middle<br>
			middle<br>
			middle<br>
			middle<br>
			middle<br>
			middle<br>
			middle<br>
			middle<br>
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>
</html>

在这里插入图片描述

第二版(flex)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>圣杯布局</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: auto;
				min-width: 1000px;
			}
			.wrap{
				display: flex;
				height: 100%;
				/* 利用padding-bottom和margin-bottom实现随内容等高布局 */
			}
			.main{
				flex: 1;
				background-color: red;
			}
			.nav, .asset{
				flex: 0 0 200px;
				background-color: #00BFFF;
			}
			.nav{
				order: -1;
				background-color: yellowgreen;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="main"></div>
			<div class="nav"></div>
			<div class="asset"></div>
		</div>
	</body>
</html>

在这里插入图片描述

完全版

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			.HolyGrail{
				display: flex;
				flex-direction: column;
				text-align: center;
				
			}
			header,footer{
				background-color: red;
				flex: 1;
			}
			.HolyGrail-body{
				display: flex;
				flex: 2;
			}
			.HolyGrail-content{
				background-color: #aaff00;
				flex: 1;
			}
			.HolyGrail-nav,.HolyGrail-ads{
				background-color: blue;
				flex: 0 0 12em;
			}
			.HolyGrail-nav{
				background-color: #FFC0CB;
				order: -1;
			}
		</style>
	</head>
	<body class="HolyGrail">
	  <header>header</header>
	  <div class="HolyGrail-body">
	    <main class="HolyGrail-content">main</main>
	    <nav class="HolyGrail-nav">nav</nav>
	    <aside class="HolyGrail-ads">aside</aside>
	  </div>
	  <footer>footer</footer>
	</body>
</html>