前端 css fixed 固定头部 出现的宽度问题

背景

系统圈红区域要固定在该位置，不随滚动而变动位置。且 其他模块公用这个区域样式风格。

遇到的问题：
采用position:fixed固定在头部，fixed是相当于浏览器定位，若设宽度为100%，则为整个屏幕宽度，这里屏幕宽度为1920px，我们可以看到右侧按钮组值露出一点点，大部分被盖住。

做过的尝试

1、红色区域父元素 宽度正常，图上是1600px, 定义的样式是 width:100%，计算得到。.
红色区域 设width:inherit，继承不到
2、红色区域 设 width: calc(100% - 240px)
由于左侧面板可伸缩，伸缩后显示异常
3、红色区域 设 position:fixed 配合 top right:0 会最左侧异常。
4、红色区域 设width:auto, max-width:100%，都不行

不想通过操作DOM就更改样式，然后苦思

最后使用的方法

将控制左侧伸缩的状态拿到，存入vuex中，页面获取vux中的状态值，动态给样式赋值

效果不是很理想 因为要计算样式 有点卡顿

代码

//state.js
toggle_collapsed: false, //左侧菜单展开;
//mutations.js
 [SET_TOGGLE_COLLAPSED]: (state, toggle_collapsed) => {
    state.toggle_collapsed = toggle_collapsed
  },
//actions.js
  ToggleCollapsedAsyn ({ commit }, toggle_collapsed) {
    commit('SET_TOGGLE_COLLAPSED', toggle_collapsed)
  },
//getters.js
export const toggle_collapsed = (state) => {
  return state.toggle_collapsed
}

下面页面设置与监听

//左导航折叠收起
      toggleCollapsed() {
        this.collapsed = !this.collapsed
        this.$store.commit('SET_TOGGLE_COLLAPSED', this.collapsed)
      },

    ...mapState(['toggle_collapsed']),
	
	:class="toggle_collapsed?'w100':'wth'"
	.wth{width: calc(100% - 240px)} 
  	.w100{width: 100%}

结束语

• 自己花了很长时间，所以希望遇到的朋友能够节省时间去开发，
• 有好的做法欢迎留言。