css[两个子容器同高且撑起父容器高度]

面对的问题是：
1.左右不同高
2.整体高度低于当前窗口高度

页面内容分为上中下结构，然后中间有侧边栏和主体内容。

需求是：当中间的内容不够高的时候，让页面内容能够铺满整个屏幕，当中间内容过高的时候自动将内容称起来显示滚动条，并且将侧边栏和主题内容高度同高

效果1：默认平铺整个屏幕

效果2：当页面内容小于某个值(宽度小于1200、高度小于720)的时候出现滚动条

效果3：中间核心内容固定有最低高度，内容不会被压缩掉

第一种方式：利用浮动/定位

<template>
  <div class="box">
    <div class="box-header"></div>
    <div class="main">
      <div class="side"></div>
      <div class="content"></div>
    </div>
    <div class="box-footer"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style lang="scss">
.box {// 父级框
  height: 100vh; // 默认高度满屏
  width: 100vw; // 默认宽度满屏
  overflow: auto;
  min-width: 1200px; // 最小宽
  min-height: 720px; // 最小高
  .box-header {
    height: 60px;
    width: 100%;
    border: 1px solid red;
  }
  .main {
    height: calc(100vh - 120px); // 默认中间内容满屏
    min-height: 600px; // 当出现滚动条时候内容有最低高度
    width: 100%;
    border: 1px solid green;
    position: relative;
    .side {
      position: absolute; // 侧边栏浮动固定随高 -- 也可以是 float:left;
      width: 200px; // 侧边栏宽度
      height: 100%;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-color:hotpink;
    }
    .content{
      margin-left: 200px; // 除去侧边栏长度
      height: 100%;
      background-color:yellow;
    }
  }
  .box-footer {
    height: 60px;
    width: 100%;
    border: 1px solid red;
  }
}
</style>

第二种方式：使用flex布局

<template>
  <div class="box">
    <div class="box-header"></div>
    <div class="main">
      <div class="side"></div>
      <div class="content"></div>
    </div>
    <div class="box-footer"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style lang="scss">
.box {
  // 父级框
  height: 100vh; // 默认高度满屏
  width: 100vw; // 默认宽度满屏
  overflow: auto;
  min-width: 1200px; // 最小宽
  min-height: 720px; // 最小高
  .box-header {
    height: 60px;
    width: 100%;
    border: 1px solid red;
  }
  .main {
    height: calc(100vh - 120px); // 默认中间内容满屏
    min-height: 600px; // 当出现滚动条时候内容有最低高度
    width: 100%;
    border: 1px solid green;
    display: flex;
    .side {
      height: inherit; //侧边栏高度自适应
      width: 200px; // 侧边栏宽度
      background-color: hotpink;
    }
    .content {
      height: 100%;
      width: calc(100vw - 200px);
      min-width: 1000px;
      background-color: yellow;
    }
  }
  .box-footer {
    height: 60px;
    width: 100%;
    border: 1px solid red;
  }
}
</style>