纯css实现上左固定，中间切换效果

最新推荐文章于 2021-12-15 11:22:15 发布

坏丶毛病

最新推荐文章于 2021-12-15 11:22:15 发布

阅读量760

点赞数 3

分类专栏： CSS-成长之路 HTML-成长之路文章标签：选项卡纯css实现侧边栏固定侧边栏固定页面切换坏丶毛病

一只努力学习进步的web前端小菜鸟。转载请声明来源。

本文链接：https://blog.csdn.net/qq_43363884/article/details/89466470

版权

CSS-成长之路同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

HTML-成长之路

8 篇文章 0 订阅

订阅专栏

接触过vue的童鞋都知道路由跳转，配置子路由实现tab选项卡效果。

而常见的头部固定，左侧边栏固定，只是右侧内容变化的这种布局方式又是我们所必须的。

那么脱离框架，怎么基于简单的css实现这种布局效果呢？

一起来看看吧。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			width: 100%;
			height: 100%;
		}
		.top{
			width: 100%;
			height: 100px;
			background: #323437;
			border-bottom: 1px solid gray;
			text-align: center;
			line-height: 100px;
			color: #fff;
			font-size: 20px;
		}
		.content{
			width: 100%;
			height: calc(100% - 101px);
			display: flex;
		}
		.nav{
			width: 200px;
			height: 100%;
			background: #323437;
		}
		iframe{
			flex: 1;
			height: 100%;
			background: #212224;
			margin: 0;
			border: 0;
		}
		ul li a{
			display: block;
			color: #fff;
			text-decoration: none;
			font-size: 20px;
			text-align: center;
			padding: 20px 0;
		}
	</style>
</head>
<body>
	<!-- 头部 -->
	<div class="top">头部区域</div>
	<!-- 内容 -->
	<div class="content">
		<!-- 左侧边栏 -->
		<ul class="nav">
			<li>
				<a href="page1.html" target="showBox">页面一</a>
				<a href="page2.html" target="showBox">页面二</a>
				<a href="page3.html" target="showBox">页面三</a>
				<a href="page4.html" target="showBox">页面四</a>
				<a href="page5.html" target="showBox">页面五</a>
			</li>
		</ul>
		<!-- 右侧显示部分 -->
		<iframe src="page1.html" name="showBox"></iframe>
	</div>
</body>
</html>

页面分为上下两个板块，头部高度固定，宽度占全屏，内容区域通过计算属性 calc计算得出全屏减去头部的高度所剩的大小，然后就是下面内容部分的大小，内容部分采用弹性盒，分为左侧边栏和右边显示部分，左侧边栏固定宽度，右侧占剩余全部大小。

右侧显示部分采用iframe框，通过a标签的href指向iframe的name值，这样a标签跳转的页面就能显示在iframe框里。

而iframe的src是其实状态要显示的页面。

这样我们就实现了这样的布局效果。

效果图：

而各个子页面只是放置了简单的图片，即在内容区域需要显示的部分。

页面一：

好了，以上就简单实现了我们的布局需求。

如有问题，请指出，接受批评。

个人微信公众号：

坏丶毛病

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
纯css实现上左固定，中间切换效果

接触过vue的童鞋都知道路由跳转，配置子路由实现tab选项卡效果。而常见的头部固定，左侧边栏固定，只是右侧内容变化的这种布局方式又是我们所必须的。那么脱离框架，怎么基于简单的css实现这种布局效果呢？一起来看看吧。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&...
复制链接

扫一扫