css经典布局上下左右

最新推荐文章于 2023-08-30 22:44:28 发布

艾小逗

最新推荐文章于 2023-08-30 22:44:28 发布

阅读量2.4k

点赞数 2

分类专栏： # CSS 文章标签： css content layout position

本文为艾小逗原创文章，未经允许不可转载。转载请注明出处

本文链接：https://blog.csdn.net/qq_32442967/article/details/99675597

版权

CSS 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

头部：定高100px，宽度自适应100%
左侧：定宽200px，高度铺满
右侧：宽度铺满自适应，高度铺满
底部：定高50px，宽度100%

整体页面无滚动条，内容区有滚动条

页面样式：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css经典布局</title>
		<style>
			html,body{margin: 0;padding: 0;width: 100%;height: 100%; overflow: hidden;}
			.header{width: 100%;height: 100px;}
			.content{width: 100%;position: absolute;top: 100px;bottom: 50px;}
			.menu{width:200px;height: 100%;float:left;overflow: auto;background-color: aliceblue;}
			.main{height: 100%;margin-left:200px;overflow: auto;background-color: bisque;}
			.footer{width: 100%;height: 50px; position: fixed;bottom: 0;z-index: 10;}
		</style>
	</head>
	<body>
		<div class="header">header</div>
		<div class="content">
			<div class="menu">menu</div>
			<div class="main"> main </div>
		</div>
		<div class="footer">footer</div>
	</body>
</html>