CSS 全屏布局使用position

最新推荐文章于 2024-04-20 18:01:19 发布

原创最新推荐文章于 2024-04-20 18:01:19 发布 · 476 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 CSS 全屏布局定位 position

前端同时被 3 个专栏收录

80 篇文章

订阅专栏

css

47 篇文章

订阅专栏

布局

13 篇文章

订阅专栏

本文介绍了一种使用CSS position属性实现全屏布局的方法，通过绝对定位元素到页面四角，实现了一个包含顶部、左侧、右侧和底部区域的响应式布局。顶部和底部固定高度，左侧宽度固定，右侧内容区自动填充剩余空间。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全屏布局使用position</title>
		<style type="text/css">
			html,
			body,
			.parent {
				margin:
					0;
				height:
					100 %;
				overflow: hidden;
			}

			body {
				color: white;
			}

			.top {
				position: absolute;
				top:
					0;
				left:
					0;
				right:
					0;
				height:
					100px;
				background: blue;
			}

			.left {
				position: absolute;
				left:
					0;
				top:
					100px;
				bottom:
					50px;
				width:
					200px;
				background: red;
			}

			.right {
				position: absolute;
				left:
					200px;
				top:
					100px;
				bottom:
					50px;
				right:
					0;
				background: pink;
				overflow:
					auto;
			}

			.right .inner {
				min-height:
					1000px;
			}

			.bottom {
				position: absolute;
				left:
					0;
				right:
					0;
				bottom:
					0;
				height:
					50px;
				background: black;
			}
		</style>
	</head>
	<body>

		<div class="top">
			top
		</div>

		<div class="left">
			left
		</div>

		<div class="right">

			<div class="inner">
				right
			</div>

		</div>

		<div class="bottom">
			bottom
		</div>
	</body>
</html>

效果图