CSS 圣杯布局

最新推荐文章于 2022-07-04 23:13:06 发布

hello一二三

最新推荐文章于 2022-07-04 23:13:06 发布

阅读量215

点赞数

分类专栏： web 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_40880022/article/details/122405100

版权

web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圣杯布局</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		body {
			height: 100%;
			/* body设置最小宽度 */
			min-width: 600px;
		}
		#header,#footer {
			width: 100%;
			height: 60px;
			line-height: 60px;
			text-align: center;
			background: #cccccc;
		}
		/* 解决浮动引起的高度塌陷问题 */
		.clearfix:after {
			content: '';
			display: block;
			clear: both;
		}
		#content {
			/* 解决子元素从父元素溢出 */
            overflow: hidden;
			padding: 0 200px;
		}
		#middle {
			width: 100%;
			background: pink;
		}
		#left,#right {
            width: 200px;
			background: hotpink;
		}
		#left {
			margin-left: -100%;
			/* middle宽度100%后,设置左右区域相对定位 */
			position: relative;
			top: 0;
			left: -200px;
		}
		#right {
			margin-left: -200px;
			position: relative;
			top: 0;
			right: -200px;
		}
		#middle,#left,#right {
			float: left;
			/* 解决等高问题 */
            padding-bottom: 10000px;
            margin-bottom: -10000px;
		}
	</style>
</head>
<body>

<div id="header">
	header
</div>
<div id="content" class="clearfix">
	<div id="middle">
		middle
	</div>
	<div id="left">
		left <br>
		left <br>
		left <br>
		left <br>
	</div>
	<div id="right">
		right
	</div>
</div>
<div id="footer">
	footer
</div>
</body>
</html>