element-plus_实现头部、侧边栏固定，数据区域可滚动查看

实现代码

<template>
  <div class="app-wrapper">
    <el-container>
      <el-header class="header">
        header
      </el-header>
      <el-container class='content-wrapper'>
        <el-aside class="menu">Aside</el-aside>
        <el-main class="content">Main
          <div>1</div>
          <div>2</div>
          <!-- ... 此处省略-->
          <div>41</div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script setup>

</script>


<style scoped>

  .app-wrapper {
    width: 100%;
    height: 100%;
  }

  .header {
    height: 50px;
    background-color: burlywood;
    padding: 0px;
    border-bottom: 1px solid #e5e7eb;
  }

  .menu {
    background-color: aquamarine;
    position: relative;
    top: 0px;
    left: 0px;
    width: 220px;
    height: calc(100vh - 50px);  
  }

  .content {
    background-color: rgb(172, 127, 255);
    position: relative;
    width: 100%;
    height: calc(100vh - 50px);  
    overflow-y: scroll;
  }
</style>

实现效果

头部、侧边栏固定，数据区域可滚动查看