全屏布局

position

<template>
  <div class="parent-position-full-screen">
    <div class="top">头部</div>
    <div class="left">左侧</div>
    <div class="right">右侧</div>
    <div class="bottom">底部</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
/* html, body, .parent-position-full-screen {
  height: 100%;overflow: hidden;
} */

/* 模拟全屏 */
.parent-position-full-screen {
  height: 200px;
  position: relative;
  overflow: hidden;
  color: #fff;
  font-weight: bold;
}

.parent-position-full-screen .top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #db6f53;
}

.parent-position-full-screen .left {
  width: 200px;
  position: absolute;
  left: 0;
  top: 50px; /* 值大于等于【头部】的高度 */
  bottom: 50px; /* 值大于等于【底部】的高度 */
  background-color: #3eaf7c;
}

.parent-position-full-screen .right {
  overflow: auto;
  position: absolute;
  right: 0;
  left: 200px; /* 值大于等于【左侧】的宽度 */
  top: 50px; /* 值大于等于【头部】的高度 */
  bottom: 50px; /* 值大于等于【底部】的高度 */
  background-color: #59a7d1;
}

.parent-position-full-screen .bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  background-color: #818c94;
}
</style>

Flex

<template>
  <div class="parent-flex-full-screen">
    <div class="top">头部</div>
    <div class="middle">
      <div class="left">左侧</div>
      <div class="right">右侧</div>
    </div>
    <div class="bottom">底部</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
/* * { margin: 0; padding: 0; }
html,body,#parent{ height:100%; } */

/* 模拟全屏 */
.parent-flex-full-screen {
  height: 200px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #fff;
  font-weight: bold;
}

.parent-flex-full-screen .top {
  height: 50px;
  background-color: #db6f53;
}

.parent-flex-full-screen .bottom {
  height: 50px;
  background-color: #818c94;
}

.parent-flex-full-screen .middle {
  flex: 1;
  display: flex;
}

.parent-flex-full-screen .middle .left {
  width: 200px;
  background-color: #3eaf7c;
}

.parent-flex-full-screen .middle .right {
  flex: 1;
  overflow: auto;
  background-color: #59a7d1;
}
</style>

Grid

<template>
  <div class="parent-grid-full-screen">
    <div class="top">头部</div>
    <div class="left">左侧</div>
    <div class="right">右侧</div>
    <div class="bottom">底部</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
/* * { margin: 0; padding: 0; }
html,body,#parent{ height:100%; } */

/* 模拟全屏 */
.parent-grid-full-screen {
  width: 100%;
  height: 100%;
  display: grid;
  /* 分成2列,第一列宽度 200px,第二列 1fr 平分剩余的部分,此处换成 auto 也行 */
  grid-template-columns: 200px 1fr;
  /* 分成3行,第一行高度 100px,第二行 auto 为自适应,此处换成 1fr 也行,第3行高度为 50px */
  grid-template-rows: 50px auto 50px;
  /*定义网格区域分布*/
  grid-template-areas:
    'header header'
    'aside main'
    'footer footer';
  color: #fff;
  font-weight: bold;
}

.parent-grid-full-screen .top {
  grid-area: header; /* 指定在哪个网格区域 */
  background-color: #db6f53;
}

.parent-grid-full-screen .left {
  grid-area: aside; /* 指定在哪个网格区域 */
  background-color: #3eaf7c;
}

.parent-grid-full-screen .right {
  grid-area: main; /* 指定在哪个网格区域 */
  background-color: #59a7d1;
}

.parent-grid-full-screen .bottom {
  grid-area: footer; /* 指定在哪个网格区域 */
  background-color: #818c94;
}
</style>