页面中部滚轮问题

最新推荐文章于 2023-12-21 16:26:07 发布

chixuanli0216

最新推荐文章于 2023-12-21 16:26:07 发布

阅读量73

点赞数 1

原文链接：https://my.oschina.net/u/3883702/blog/1832999

版权

头部和尾部不动，中间部分多的可以滚动显示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body,.contiler{
				height: 100%;
			}
			.header{
				height: 30px;
				background-color: aqua;
			}
			.content{
				height: calc(100% - 60px);/*必须要有空格*/
				overflow-y: scroll;  /*只有y轴可滚动*/
			}
			.footer{
				height: 30px;
				background-color: #00FFFF;
			}
			.item{
				height: 400px;
				background-color: antiquewhite;
			}
		</style>
	</head>
	<body>
		<div class="contiler">
			<div class="header">
				11111
			</div>
			<div class="content">
				<div class="list">
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
				</div>
			</div>
			<div class="footer">
				3333
			</div>
		</div>
	</body>
</html>

转载于:https://my.oschina.net/u/3883702/blog/1832999