页面顶部导航栏css样式布局

项目场景：

css样式布局

例如：项目场景：页面顶部导航栏，左侧logo、右侧退出登录固定在页面，不随滚动条滚动；中间有菜单，添加滚动条。

---

问题描述

顶部导航栏出现滚动条，滚动条位置在页面底部

解决方案：

提示：这里填写该问题的具体解决方案：

1. 父元素进行flex布局，overflow:hidden
2. 左元素420px;右元素80px，position:absolute
3. 3. 中间元素使用宽度计算 width: calc(100% - 500px);

.header {
  overflow: hidden;
  height: 60px !important;
  padding: 0;
  display: flex; //设置显示为flex布局
  justify-content: space-between; //设置为flex左右布局
  align-items: center; //元素上下居中（防止右边按钮贴上下边）

  .logo {
    display: flex;
    justify-content: space-between;
    align-items: center;

    img {
      width: 420px;
      height: 44px;
      transform: rotate(0deg);
    }
  }

  .top-menu {
    width: calc(100% - 500px);
    min-width: 300px; //定最小宽度，菜单栏会出现滚动条

  }

  .layout {
    width: 80px;
    position: absolute;
    right: 8px;
  }
}

<template>
  <div class="h-100 top-menu">
    <el-scrollbar wrap-class="el-scrollbar__wrap">
      <el-menu mode="horizontal" :default-active="activeRouter" router>
      </el-menu>
    </el-scrollbar>
  </div>

</template>