实现顶端部分不变，由于视图的宽高实现内容部分自动滚动

最新推荐文章于 2024-09-25 09:01:21 发布

艾迪768

最新推荐文章于 2024-09-25 09:01:21 发布

阅读量113

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45473097/article/details/109647456

版权

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>布局</title>
</head>
<style>
	html,body{
		width: 100%;
		height: 100%;
		margin: 0;
		padding:0; 
	}
	.content{
		width: 100%;
		height: 100%;
		position: relative;
		box-sizing: border-box;
		padding-top: 100px;
	}
	.top{
		position: absolute;
		top: 0;
		height: 100px;
		width: 100%;
		background-color:red;
	}
	.box-content{
		width: 100%;
		height: 100%;
		position: relative;
		box-sizing: border-box;
		padding-top: 100px;
	}
	.title{
		position: absolute;
		top: 0;
		height: 100px;
		width: 100%;
		background-color:#000;
	}
	.box{
		width: 100%;
		height: 100%;
		overflow-y: auto;
		position: relative;
		box-sizing: border-box;
		overflow-y: auto;

	}
</style>
<body>
	<div class="content">
		<div class="top">
		</div>
		<div class='box-content'>
			<div class="title">
				
			</div>
			<div class="box">
			1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>

				
			</div>
		</div>
	</div>
</body>
</html>