Top and bottom fixed height, middle adaptive

  <div class="body">
    <div class="header"></div>
    <div class="section">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="footer"></div>
  </div>

1.position positioning

The whole parent element is relatively positioned, the navigation height is fixed, the content area is absolutely positioned, and the highly adaptive is realized by positioning attributes.

html,body{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .header{
    height: 80px;
    background-color: #ccc;
  }
  .section{
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 80px;
    overflow:auto;
    background-color: #f8f8f9;
  }
 
  .footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background-color: #ccc;
  }

2. flex flexible layout

By using the flex flex direction: column attribute, the elements are arranged from top to bottom. flex:1 occupies all positions except the specified elements.

html,body{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  
  .body{
    height: 100%;
    background-color: #808695;
    display: flex;
    /*Set order*/
    flex-direction: column; 
  }
  .header{
    height: 80px;
    background-color: #ccc;
  }
  .section{
    flex: 1;
    background-color: #f8f8f9;
  }
  .footer{
    height: 80px;
    background-color: #dcdee2;
  }

Top fixed height, left navigation fixed width, right content adaptive

1. positioning

Relative positioning of the parent element, left absolute positioning determines the adaptive height and left alignment. Right right adapts height and width by absolute positioning

html,body{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  
  .body{
    height: 100%;
    position: relative;
    background-color: #F5F7F9;
  }
  .header{
    height: 80px;
    background-color: #515A6E;
  }
  .section{
    background-color: #F5F7F9;
    position: absolute;
    left: 0;
    top: 80px;
    bottom: 0;
    right: 0;
  }
  .left{
    background-color: #888888;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100px;
  }
  .right{
    background-color: #F5F7F9;
    position: absolute;
    top: 0;
    left: 100px;
    bottom: 0;
    right: 0;
  }

2. float + margin

The left side uses floating, and the floating element is half separated from the document flow. It overlaps with the position of the adjacent element but does not overlap with the internal document of the adjacent element.

html,body{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  
  .body{
    height: 100%;
    position: relative;
  }
  .header{
    height: 80px;
    background-color: #515A6E;
  }
  .section{
    background-color: #afc7de;
    position: absolute;
    left: 0;
    top: 80px;
    bottom: 0;
    right: 0;
  }
  .left{
    background-color: #888888;
    float: left;
    width: 100px;
    height: 100%;
  }
  .right{
    background-color: #F5F7F9;
    height: 100%;
    margin-left: 100px;
  }

3. BFC layout

BFC is generated from left float and right float, which makes use of the overlapping feature of BFC and float elements.

4. flex layout

The flex direction: column layout is top-down, and flex:1 makes the section cover all areas except the header. Section sets the flex, which is arranged from left to right by default. flex:1 makes right fit all areas except left

.body{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header{
  height: 80px;
  background-color: #515A6E;
}
.section{
  background-color: #afc7de;
  flex: 1;
  display: flex;
}
.left{
  background-color: #fff;
  width: 100px;
}
.right{
  flex: 1;
  background-color: #F5F7F9;
}

Layout of the Holy Grail: fixed height at the top and bottom, fixed width at the left and right sides, adaptive in the middle

<div class="body">
    <div class="header"></div>
    <div class="section">
      <div class="left"></div>
      <div class="center">111</div>
      <div class="right"></div>
    </div>
</div>

1. flex layout

.header{
    height: 80px;
    background-color: #515A6E;
  }
  .section{
    background-color: #afc7de;
    flex: 1;
    display: flex;
  }
  .left{
    background-color: #fff;
    width: 100px;
  }
  .center{
    flex: 1;
    background-color: #F5F7F9;
  }
  .right{
    width: 100px;
    background-color: #fff;
  }

2. positioning

.body{
  height: 100%;
  position: relative;
}
.header{
  height: 80px;
  background-color: #515A6E;
}
.section{
  position: absolute;
  width: 100%;
  left: 0;
  top: 80px;
  bottom: 0;
  right: 0;
  background-color: #afc7de;
}
.left{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
  width: 100px;
}
.center{
  height: 100%;
  margin-left: 100px;
  margin-right: 100px;
  background-color: #F5F7F9;
}
.right{
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100px;
  background-color: #fff;
}

3. float + margin

section after left and right elements

.body{
  height: 100%;
  position: relative;
}
.header{
  height: 80px;
  background-color: #515A6E;
}
.section{
  position: absolute;
  width: 100%;
  left: 0;
  top: 80px;
  bottom: 0;
  right: 0;
  background-color: #afc7de;
}
.left{
  float: left;
  background-color: #fff;
  width: 100px;
  height: 100%;
}
.center{
  height: 100%;
  margin-right: 100px;
  margin-left: 100px;
  background-color: #F5F7F9;
}
.right{
  float: right;
  height: 100%;
  width: 100px;
  background-color: #fff;
}