vue elementui 固定顶部、左侧菜单与面包屑，自适应 iframe 页面布局

疑问点：iframe无法高度100%，如果写了100%就会有滚动条，所以只写了99.5%

【效果图】

路由示例

const routes = [{title: 'Index',path: '/',name: "Index",component: () => import('@/views/Index.vue'),},{title: 'TEST',path: '/TEST', // 使用内部页面时，路径为 "#/TEST"name: "TEST",component: () => import('@/views/TEST.vue'),},
]

页面完整代码

<template><div class="container"><div class="top"><el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"><el-menu-item index="1">Home</el-menu-item><el-submenu index="2"><template slot="title">Options</template><el-menu-item index="2-1">Option1</el-menu-item><el-menu-item index="2-2">Option2</el-menu-item><el-submenu index="2-4"><template slot="title">Option3</template><el-menu-item index="2-4-1">Option3-1</el-menu-item><el-menu-item index="2-4-2">Option3-2</el-menu-item></el-submenu></el-submenu><el-menu-item index="3" disabled>Msg</el-menu-item><el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Order</a></el-menu-item></el-menu></div><div class="wrap"><div class="l"><p style="margin-top: 32px;">aside-bar</p></div><div class="r"><div class="bread-wrap"><el-breadcrumb separator="/"><el-breadcrumb-item>首页</el-breadcrumb-item><el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item><el-breadcrumb-item>活动列表</el-breadcrumb-item><el-breadcrumb-item>活动详情</el-breadcrumb-item></el-breadcrumb></div><div class="iframe-wrap"><iframe :src="iframeUrl" width="100%" height="99.5%" frameborder="0"></iframe></div></div></div></div>
</template><script>
export default {data() {return {activeIndex: '1',// iframeUrl: '#/TEST',  // 关键点：使用内部页面的话，要按这样写iframeUrl: 'https://www.baidu.com',}},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);}}
}
</script><style scoped lang="less">
.container {display: flex;flex-direction: column;height: 100vh;color: #fff;&>.top {height: 48px;background: #212121;}&>.wrap {flex: 1;display: flex;height: 0;&>.l {width: 200px;background: #212121;}&>.r {overflow-y: hidden;display: flex;flex-direction: column;flex: 1;width: 0;background: #fff;.bread-wrap {display: flex;align-items: center;height: 48px;}.iframe-wrap {overflow-y: auto;flex: 1;height: 0;}}}
}.el-menu {height: 100%;background: transparent;
}/deep/.el-menu--horizontal>.el-submenu .el-submenu__title,
.el-menu--horizontal>.el-menu-item,
.el-menu--horizontal>.el-submenu .el-submenu__title {height: 48px;line-height: 48px;color: #ccc;
}.el-menu--horizontal>.el-menu-item.is-active {color: #fff;
}.el-menu.el-menu--horizontal {border-bottom: solid 1px #000;
}
</style>