css上下固定,中间自适应

效果图如下:

完整代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">	
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			*{
				margin: 0;
			}
			html,
			body {
				height: 100%;
				background-color: #fff;
				font-size: 14px;
			}
			#wrap {
				height: 100%;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-flex-flow: column;
				flex-flow: column;
			}
			.header{
				text-align: center;
				line-height: 40px;
				background-color: #0000FF;
				color: #fff;
			}
			#main {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
				overflow: auto;
			}
			#nav {
				background-color: #008000;
				text-align: center;
				line-height: 40px;
			}						
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="header">
				顶部
			</div>	
			<div id="main">
				中间1
				<div>中间</div><div>中间</div><div>中间</div><div>中间</div><div>中间</div>
				<div>中间</div><div>中间</div><div>中间</div><div>中间</div><div>中间</div>
				<div>中间</div><div>中间</div><div>中间</div><div>中间</div><div>中间</div>
				<div>中间</div><div>中间</div><div>中间</div><div>中间</div><div>中间</div>
				<div>中间</div><div>中间</div><div>中间</div><div>中间</div><div>中间</div>
				<div>中间</div><div>中间</div><div>中间</div><div>中间</div><div>中间</div>
				<div>中间</div><div>中间</div><div>中间</div><div>中间</div><div>中间</div>
				<div>中间</div><div>中间</div><div>中间</div><div>中间</div><div>中间</div>
				<div>中间</div><div>中间</div><div>中间</div><div>中间</div><div>中间2</div>
				<div>中间</div><div>中间</div><div>中间</div><div>中间</div><div>中间3</div>
				<div>中间</div><div>中间</div><div>中间</div><div>中间</div><div>中间4</div>
				<div>中间</div><div>中间</div><div>中间</div><div>中间</div><div>中间5</div>
			</div>
			<!--底部-->
			<div id="nav">
				底部
			</div>
			<!--end底部-->
		</div>
	</body>
</html>

发布者

cylyiou

cylyiou

分享前端知识

支付宝扫码打赏微信打赏

如果文章对您有帮助,不妨移至上方按钮小额赞助我一下,让我有动力继续写出高质量的教程。

发表评论

电子邮件地址不会被公开。