app.vue

<template>
  <layout></layout>
</template>
<script setup lang='ts'>
import layout from './layout/index.vue'
</script>
<style  lang='less'>
html,
body,
#app {
  height: 100%;
  overflow: hidden;
}
</style>

content/index.vue

<template>
  <div class="content">
    内容区域
    <div class="content-item" v-for="item in 100">
      {{item}}
    </div>
  </div>
</template>
<script setup lang='ts'>

</script>
<style lang="less" scoped>
.content {
  flex: 1;
  margin: 20px;
  overflow: auto;

  &-item {
    padding: 20px;
    border: 1px solid #ccc;
  }
}
</style>

Header/index.vue

<template>
  <div class="header">
    头部区域
  </div>
</template>
<script setup lang='ts'>

</script>
<style scoped>
.header {
  height: 60px;
  border-bottom: 1px solid #ccc;
}
</style>

Menu/index.vue

<template>
  <div class="menu">
    菜单
  </div>
</template>
<script setup lang='ts'>

</script>
<style scoped lang="less">
.menu {
  width: 200px;
  border-right: 1px solid #ccc;
}
</style>

layout/index.vue

<template>
  <div class="layout">
    <Menu></Menu>
    <div class="layout-right">
      <Header></Header>
      <Content></Content>
    </div>
  </div>
</template>
<script setup lang='ts'>
import Menu from './Menu/index.vue'
import Header from './Header/index.vue'
import Content from './Content/index.vue'
</script>
<style scoped lang="less">
.layout {
  display: flex;
  height: 100%;
  overflow: hidden;

  &-right {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}
</style>