preface

In order to follow a normal WEB layout, all of this is written in header and footer mode with left-center layout.

The first: float based implementation

Implementation approach

General idea, make the left and right sides of the two Aside float to the left and right sides

Code implementation

<! -- HTML section -->
<div class="container">
  <! -- Header -->
  <header>This is the head</header>
  <! -- Aside and content -->
  <div class="middle clearfix">
    <aside class="left"></aside>
    <aside class="right"></aside>
    <! In order to prevent the right side of the content to be crowded down, so placed under the right side of the column -->
    <div class="content">Here is the content</div>
  </div>
  <! -- bottom Footer -->
  <footer></footer>
</div>
<! -- CSS section -->
<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  
  .clearfix {
    zoom: 1;
    &::after {
      display: block;
      content: ' ';
      clear:both
    }
  }
  
  html.body {
    width: 100%;
    height: 100%
    }
    .container {
      width: 100%
      height: 100%
      header {
        height: 80px;
        background: rgba(0.0.0.0.5)}footer {
        height: 80px;
        background: rgba(0.0.0.0.5)}.middle {
        height: calc(100% - 80px - 80px)
        aside {
          height: 100%;
          width: 300px;
          background: rgba(156.154.249.1)}.left {
          float: left
        }
        .right: {
          float: right
        }
      }
    }
  }
</style>
Copy the code

Implementation effect

The second is based on position: Absolute

Implementation approach

Set Aside position: absolute, and set left: 0 right: 0 width: custom value, give middle content left, right equal to left and right width

Code implementation

<! <div class="container"> <! --> < Header ></ Header >< div class="middle"> <! < Aside ="left"></ Aside ><! <div class="content"> </div> <! - the right value - > < value class = "right" > < / value > < / div > <! Footer --> < Footer ></ Footer ></ div> <! <style lang=" SCSS "> * {margin: 0; padding: 0 } html, body { width: 100%; height: 100% } .container { width: 100%; height: 100%; header { height: 80px; Background: Rgba (0, 0, 0, 0.5); } footer { height: 80px; Background: Rgba (0, 0, 0, 0.5); } .middle { height: calc(100% - 80px - 80px); position: relative; aside, .content { position: absolute; } .left { width: 300px; background: rgba(156, 154, 249, 1); left: 0; height: 100%; } .right { width: 300px; background: rgba(156, 154, 249, 1); right: 0; height: 100%; } .content { left: 300px; right: 300px; } } } </style>Copy the code

Implementation effect

Third: based on display: Flex implementation

Implementation approach

Display: flex, set left and right Aside width, set content flex:1

Code implementation

<! <div class="container"> <! --> < Header ></ Header >< div class="middle"> <! < Aside ="left"></ Aside ><! <div class="content"> </div> <! - the right value - > < value class = "right" > < / value > < / div > <! Footer --> < Footer ></ Footer ></ div> <! <style lang=" SCSS "> * {margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .container { header { height: 80px; Background: Rgba (0, 0, 0, 0.5); } footer { height: 80px; Background: Rgba (0, 0, 0, 0.5); } .middle { display: flex; height: calc(100% - 80px - 80px); aside { width: 300px; background: rgba(156, 154, 249, 1); } .content: { flex: 1; } } } </style>Copy the code

Implementation effect

Fourth: based on display: table implementation

Implementation approach

Display: table-cell: set Aside width (left, middle, and right)

Code implementation

<! <div class="container"> <! --> < Header ></ Header >< div class="middle"> <! < Aside ="left"></ Aside ><! <div class="content"> </div> <! - the right value - > < value class = "right" > < / value > < / div > <! Footer --> < Footer ></ Footer ></ div> <! <style lang=" SCSS "> * {margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .container { header { height: 80px; Background: Rgba (0, 0, 0, 0.5); } footer { height: 80px; Background: Rgba (0, 0, 0, 0.5); } .middle { display: table; width: 100% height: calc(100% - 80px - 80px); aside { width: 300px; display: table-cell; background: rgba(156, 154, 249, 1); } .content: { display: table-cell; } } } </style>Copy the code

Implementation effect

Fifth: based on display: grid implementation

Implementation approach

Use grid-template-columns: 300px auto 300px and set the columns to 300px, auto and 300px.

Code implementation

<! <div class="container"> <! --> < Header ></ Header >< div class="middle"> <! < Aside ="left"></ Aside ><! <div class="content"> </div> <! - the right value - > < value class = "right" > < / value > < / div > <! Footer --> < Footer ></ Footer ></ div> <! <style lang=" SCSS "> * {margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .container { header { height: 80px; Background: Rgba (0, 0, 0, 0.5); } footer { height: 80px; Background: Rgba (0, 0, 0, 0.5); } .middle { display: grid; grid-template-columns: 300px auto 300px; height: calc(100% - 80px - 80px); aside { background: rgba(156, 154, 249, 1); } } } </style>Copy the code

Implementation effect