【常见页面布局】- 1、应用网站常用布局 - 侧边栏 和头部固定

<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>