VUE(四)•iview页面布局之左侧边栏撑满屏幕

左侧固定，右侧自适应（或右侧固定，左侧自适应）布局方法

写在前面

归纳总结了几种比较ok的方法，左右布局是基本功之一，虽然现在我们基本在开发中都会使用类似antd，element，iview这些前端ui框架，这些框架已经把传统的布局样式给封装的很完美了，但是作为前端的css基础，我认为这些也是必须掌握的，而且很有可能在实际开发过程中就遇到了呢

• 方法一：左侧div浮动 右侧元素设置margin-left自适应
• 方法二：左侧div浮动，右侧元素创建BFC
• 方法三：左侧div采用绝对布局，右侧元素设置margin-left自适应
• 方法四：外层父级元素使用table布局，子元素使用table-cell
• 方法五：双float + calc计算宽度
• 方法六：flex布局

首先列出通用的css样式
通用css样式：

.mainContent {
  /* 基本最外层父级元素，不需要做任何特殊处理,这里写着，只是在实际开发中，外层肯定会有一个嵌套的父级元素 */
}

.main-1::after {
  /*通用css 用于清除浮动，使用浮动布局必然会涉及到清除浮动，这里我只用了最常用的方法，其余方法请读者自行搜索*/
  content: "";
  clear: both;
  display: block;
  height: 0;
}

.leftDivCommon {
  /*左侧布局通用样式*/
  background: gray;
  w