经典后台管理系统布局(分享)

效果图

<!-- 内容部分 -->
<div class="container">
	<div class="header">
		头部
	</div>
	<div class="box">
		<div class="nav">
			...
		</div>
		<div class="content">
			...
		</div>
	</div>
</div>

/* 样式部分 */
* {
	margin: 0;
	padding: 0;
}

.container {
	width: 100vw;
	height: 100vh;
}

.box {
	display: flex;
	height: calc(100% - 60px);
}

.header {
	background-color: #ccc;
	width: 100%;
	height: 60px;
}

.nav {
	background-color: #008c8c;
	width: 120px;
	height: 100%;
	overflow: auto;
}

.content {
	width: calc(100% - 120px);
	height: 100%;
	overflow: auto;
}