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

秒速五厘米 2021-09-19 01:42 362阅读 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是其实状态要显示的页面。

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

效果图：

![20190423095523269.gif][]

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

页面一：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70][]

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

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

个人微信公众号：

![2020082411554455.png][]

[20190423095523269.gif]: /images/20210812/5a74299b03d34d64aba1a9b41c99a9d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70]: /images/20210812/fb2dfefcfb5348e69c595c5410381926.png
[2020082411554455.png]: /images/20210812/2d0ff4e906da4b729bc61d217cd17fa3.png