解决带左侧导航栏时页面使用固定布局右侧超出范围的问题

问题现象

问题根源

     使用fixed布局且width是100%的话，那么其宽度是整个页面的宽度，由于许多框架左侧都带了导航栏，因此在设置底部div 宽度时不能设为100%，而应该减去左侧导航栏的宽度。

 

解决办法

   倘若左侧导航栏没有收缩功能，那么只需要查下左侧导航栏的宽度，然后使用

width:calc(100% - 导航宽度 )

  若左侧导航栏有收缩功能，那么则可以设置2个不同宽度的样式，1个是收缩时的，1个是张开时的。

 下面已Ruoyi框架为例，若依框架左侧导航栏收缩时是54px，张开时是200px。

第1步 ：弄2个class

#张开时
.footerx {
  position:fixed;
  width:calc(100% - 200px);

  z-index: 1000;
  bottom: 5px;
  height: 50px;


}

#收缩时
.footery {
  position:fixed;
  width:calc(100% - 54px);

  z-index: 1000;
  bottom: 5px;
  height: 50px;


}

  第2步：创建一个computed

  computed: {
    fixedClass:function(){
       //根据左侧栏收缩状态来确定使用哪个样式
       if(this.$store.state.app.sidebar.opened)
         return "footerx"
      else
        return "footery"
    },
  }

最后 

 

      
已查收0件,其中0件需制备
      确定收样
      
    

最后的效果就是你在收缩的时候，页面会动态调整相应的宽度。