<template><div id="app"><div class="sider">侧边栏</div><div class="header">头部</div><div class="content">内容<p style='height:2000px;'></p>111111111111111</div></div>
</template><script>
export default {data () {return {};},
}
</script><style scoped>
/* 1---页面宽高100%，其实这个不写也行 */
#app{height:100%;height:100%;
}
/* 2---侧边栏：高度满屏，固定定位 */
.sider{width:200px;height:100vh;position:fixed;background:rgb(81, 90, 110);color:#fff;}
/* 3---头部：宽度100%， 左padding--侧边栏的宽度 */
.header{width:100%;height:64px;padding-left:200px;background: #fff;box-shadow:0 2px 2px 1px #ddd;/* box-shadow:1.水平阴影位置  2.垂直阴影位置 3.阴影模糊距离 4.阴影的尺寸  5.阴影颜色  6.内部阴影inset/外部阴影outset，默认外部    -- 1，2必选项 */
}
/* 4--- 内容：绝对定位--left:侧边栏宽度，top:头部高度，bottom：0到底，right:0 ,这样 内容的宽高就是侧边栏 和 头部的 “剩余部分”*/
/* 且让内容overflow:auto 内容超了，自己有滚动条，就不会拉伸高度，这样滚动条就只在content里面了 */
.content{position:absolute;left:200px;top:65px;bottom: 0;right:0;overflow: auto;
}
</style>