商品分类页面的静态布局模板

最新推荐文章于 2024-06-15 11:46:27 发布

陈闲之

最新推荐文章于 2024-06-15 11:46:27 发布

阅读量243

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_50939386/article/details/125667788

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			header,footer{
				height: 50px;
				background-color: pink;
			}
			.main {
				height: calc(100vh - 50px - 50px);
				display: flex;
				background-color: yellow;        
			}
			.left {
			   width: 200px;
			   overflow: auto;
			   background-color: blue;
			}
			.right {
			   flex: 1;
			   overflow: auto;
			   background-color: red;
			}
		</style>
	</head>
	<body>
		<header></header>
		<div class="main">
			<div class="left"></div>
			<div class="right"></div>
		</div>
		<footer></footer>
	</body>
</html>