后台管理导航栏布局

最新推荐文章于 2023-08-19 11:41:38 发布

Realistic-er

最新推荐文章于 2023-08-19 11:41:38 发布

阅读量1.3k

点赞数 1

文章标签：前端 html css

本文链接：https://blog.csdn.net/m0_52518047/article/details/128433167

版权

在后台管理系统里，如下图是常用的布局，左边导航栏，右边是页面。这种布局还要保障右边页面在滚动的时候左边是不能动的。

思路：左边盒子采用固定定位，右边盒子给添加一个margin-left，由于左边导航栏会发生折叠，所以这个margin-left是动态的

在这里插入图片描述

<div class="container">
    //
	<div class="left"></div>
	<div class="right" :style="{'margin-left': isCollapse ? '60px' : '201px'}"></div>
</div>

.left {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    overflow-x: hidden;
}