The top and bottom are fixed height, and the middle is self-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>
Copy the code

1. The position location

The whole parent element is relative positioned, the navigation height is fixed, the content area is absolutely positioned, and the height is self-adaptive through positioning attributes.

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

2. Flex flex layout

Use the Flex flex-direction: column attribute to arrange the elements from top to bottom. Flex :1 occupies all positions except for the specified element

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

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

1. The positioning

The parent element is positioned relative to each other, and the left left is absolutely positioned to determine the adaptive height and is aligned left. The right right ADAPTS height and width by absolute positioning

.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: #fff;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100px;
  }
  .right{
    background-color: #F5F7F9;
    position: absolute;
    top: 0;
    left: 100px;
    bottom: 0;
    right: 0;
  }
Copy the code

2. float + margin

The left left uses a float, where the float element is semi-detached from the document flow and overlaps with the position of the neighboring element but not with the internal document of the neighboring element

.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: #fff;
  float: left;
  width: 100px;
  height: 100%;
}
.right{
  background-color: #F5F7F9;
  height: 100%;
  margin-left: 100px;
}
Copy the code

3. The landing the layout

Floats on the left and generates a BFC on the right, taking advantage of the fact that the BFC overlaps with the float element

4. The flex layout

Flex -direction: column layout from top to bottom, flex:1 fills all sections except header. Section sets flex, which is arranged from left to right by default, and Flex :1 makes right fill 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;
}
Copy the code

Grail layout: top, bottom fixed height, left and right sides fixed width, middle adaptive

<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>
Copy the code

1. The 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;
  }
Copy the code

2. The 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;
}
Copy the code

3. float + margin

The section comes after the left and right elements. (If the right float element comes after the right float element, the middle element will be rendered first. If the right float element comes after the right float element, the middle element will be rendered first.

.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;
}

Copy the code