html页面布局上下左固定-中间内容滚动显示-案例

最新推荐文章于 2025-04-09 09:35:12 发布

原创最新推荐文章于 2025-04-09 09:35:12 发布 · 960 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #caic #页面布局

HTML 专栏收录该内容

187 篇文章

订阅专栏

本文介绍了如何实现一个全屏网页设计，内容区域支持上下左右固定，侧边栏固定，中间内容通过绝对定位并设置滚动条，展示了大量博客示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全屏</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
				background: #008B9A;
			}
			.header{
				width: 100%;
				height: 80px;
				background: #006DB7;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 99;
			}
			.side{
				width: 80px;
				height: calc(100% - 60px - 80px);
				background: #008CD5;
				position: fixed;
				top: 80px;
				left: 0;
				z-index: 88;
			}
			.content{
				position: absolute;
				top: 80px;
				left: 80px;
				z-index:1;
				background: #00C298;
				width: calc(100% - 80px);
				height: calc(100% - 80px - 60px);
				overflow-y: scroll;
			}
			.footer{
				width: 100%;
				height: 60px;
				background: #018EE8;
				position: fixed;
				bottom: 0;
				left: 0;
				z-index: 89;
			}
			p{
				height: 80px;
			}
		</style>
	</head>
	<body>
		<div class="header">header</div>
		<div class="main">
			<div class="side">side</div>
			<div class="content">
				<p>JackieDYH博客示例</p>
				<p>JackieDYH博客示例</p>
				<p>JackieDYH博客示例</p>
				<p>JackieDYH博客示例</p>
				<p>JackieDYH博客示例</p>
				<p>JackieDYH博客示例</p>
				<p>JackieDYH博客示例</p>
				<p>JackieDYH博客示例</p>
				<p>JackieDYH博客示例</p>
				<p>JackieDYH博客示例</p>
				<p>JackieDYH博客示例</p>
				<p>JackieDYH博客示例</p>
				<p>JackieDYH博客示例</p>
				<p>JackieDYH博客示例</p>
				<p>JackieDYH博客示例</p>
				<p>JackieDYH博客示例</p>
				<p>JackieDYH博客示例</p>
				<p>JackieDYH博客示例</p>
				<p>JackieDYH博客示例</p>
				<p>JackieDYH博客示例</p>
			</div>
		</div>
		<div class="footer">footer</div>
	</body>
</html>

核心部分

.content{
	position: absolute;
	top: 80px;
	left: 80px;
	z-index:1;
	background: #00C298;
	width: calc(100% - 80px);
	height: calc(100% - 80px - 60px);
	overflow-y: scroll;
}