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

最新推荐文章于 2024-09-02 11:34:03 发布

windcore

最新推荐文章于 2024-09-02 11:34:03 发布

阅读量1.3k

点赞数

分类专栏：前端技术文章标签： html javascript 前端

本文链接：https://blog.csdn.net/yueping0718/article/details/126083842

版权

前端技术专栏收录该内容

3 篇文章 1 订阅

订阅专栏

本文介绍了在网页布局中遇到的问题，即使用fixed布局时，底部div宽度需考虑左侧导航栏的影响。解决方案是利用CSS的calc()函数动态计算宽度，分别设置了导航栏展开和收缩时的两种样式。通过Vue.js的computed属性根据侧边栏状态动态应用样式，确保底部div始终适应页面宽度。示例代码展示了如何在Ruoyi框架中实现这一功能。

摘要由CSDN通过智能技术生成

问题现象

问题根源

使用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"
    },
  }

最后

 <div class="  bg-success flex justify-between vertical-center "  :class="fixedClass"  >
      <div>已查收0件,其中0件需制备</div>
      <el-button :disabled="!checkCount" type="primary" icon="el-icon-check" plain size="small"
                 >确定收样
      </el-button>
    </div>

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