vue中element-UI的布局

vue中element-UI的布局

我在vue项目中布局喜欢使用这种侧栏和头部固定 中间用来展示其他页面功能

布局方法

首先我是用一个index.vue页面作为首页，
写好侧栏和头部后 在el-main主要内容里加上< router-view />
路由设置 设置根目录 / 的页面为这个index页面
然后给他加 children 子路由 这里的页面都会显示在这个父页面也就是index的< router-view />里

左边侧栏保持不动，右边main主要内容比较多的时候可以滚动浏览效果

如何达到这种效果呢，很简单 只需要把main的样式改成固定就行
代码

.el-main{
 /* 只需将main的高度固定就可以产生侧栏固定，主要内容有滚动条了*/
  height: 919px;
  padding: 16px;
}

组件显示错乱

element ui的官方文档布局示例代码里是这样的

.el-main {
    background-color: #fff;
    color: #333;
    text-align: center;
    line-height: 160px;
    height: 100%;
    padding: 0;
  }

我就直接拿来用了 ，结果就是页面组件各种变形错乱，
找了很久才发现这个line-height 是罪魁祸首

.el-main {
    background-color: #fff;
    color: #333;
    text-align: center;
        /*罪魁祸首*/
    /*line-height: 160px;*/
    height: 100%;
    padding: 0;
  }