头部和底部固定，中间内容可滚动

最新推荐文章于 2022-08-24 09:53:39 发布

原创最新推荐文章于 2022-08-24 09:53:39 发布 · 7.5k 阅读

6 ·

CC 4.0 BY-SA版权

基础布局专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的网页布局方案，该方案可以让页面的顶部和底部保持固定位置，而中间的内容区域则可以滚动。通过简单的代码示例展示了如何设置各个部分的位置和高度，以及如何控制溢出内容的显示。

html+css的代码的展示
 
 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>上下固定，中间内容可以滚动</title>
	<style type="text/css">
		html,body,.page{width:100%; height:100%;overflow:hidden;}
		.top,.con,.bottom{position:absolute; left:0; right:0;}
		.top{top:0;z-index:1; height:30px;background:#ff0;}
		.con{top:30px; bottom:40px; overflow:auto;}
		.bottom{bottom:0;z-index:1; height:40px;background:#00f;}
 
	</style>
</head>
<body>
	<div class="wrap">
		<div class="top">头部</div>
		<div class="con">中间内容<br/>
		中间内容<br/>
		中间内容<br/>
		中间内容<br/>
		中间内容<br/>
		中间内容<br/>
		中间内容<br/>
 
		</div>
		<div class="bottom">底部内容</div>
	</div>
</body>
</html>