SOURCE

console 命令行工具 X clear

                    
>
console
<div class="main">
  <div class="content">
     <div class="left">左边固定100px</div>
    <div class="center">
中国普通家庭的宽带基本能达到8Mbps,实际速率大约为500—900KB/s,全国3G/4G用户占有比超过了50%,为了保证图片能更好地加载展示给用户看,团队约定:

PC平台单张的图片的大小不应大于 200KB。

移动平台单张的图片的大小不应大于 100KB。

(图片的大小约定标准随全国网速的改变而改变)</div>
    <div class="right">右边固定100px</div>
  </div>
 <div class="foot">底部定高100px</div>
</div>
html,body {
  height: 100%;
}

body {
  margin: 0;
}

.main {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.content {
  display: flex;
  flex-grow: 1;
  flex-basis: 0%;
}

.left, .right {
  width: 100px;
  background-color: blanchedalmond;
}

.center {
  flex-grow: 1;
  flex-basis: 0%;  /*相对于父元素的宽,没有该属性的话三个元素会重新分配空间,左右就不是100px,https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis*/
  background-color: lightblue;
} 

.foot {
  height: 100px;
  background-color: greenyellow;
}