全屏布局

position

position 全屏布局

<div class="parent">
  <div class="top">头部</div>
  <div class="left">左侧</div>
  <div class="right">右侧</div>
  <div class="bottom">底部</div>
</div>

/*
html, body, .parent {
  height: 100%;
  overflow: hidden;
}
*/

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

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

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

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

.parent .bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  background-color: #818c94;
}

Flex

flex 全屏布局

<div class="parent">
  <div class="top">头部</div>
  <div class="middle">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
  </div>
  <div class="bottom">底部</div>
</div>

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

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

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

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

.parent .middle {
  flex: 1;
  display: flex;
}

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

.parent .middle .right {
  flex: 1;
  overflow: auto;
  background-color: #59a7d1;
}

Grid

grid 全屏布局

<div class="parent">
  <div class="top">头部</div>
  <div class="left">左侧</div>
  <div class="right">右侧</div>
  <div class="bottom">底部</div>
</div>

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

/* 模拟全屏 */
.parent {
  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';
  width: 100%;
  height: 100%;
  color: #fff;
  font-weight: bold;
}

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

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

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

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