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

接触过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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

坏丶毛病

很庆幸此文有幸对您有帮助 ~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值