title: Css full height for some div
body: <p>Here I have a simple layout that I want to design</p>
  <p><a href="https://i.stack.imgur.com/IFrcV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IFrcV.png" alt="enter image description here" /></a></p>
  <p>but in my implemented <code>CSS</code> I can't set full height for <code>div</code>s</p>
  <p><a href="https://codepen.io/MahdiPishguy/pen/BaYPdyv" rel="nofollow noreferrer">this link</a> is what I in the code</p>
  <p>my code result:</p>
  <p><a href="https://i.stack.imgur.com/8w9eX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8w9eX.png" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  
  .border {
    border: 1px solid #000;
  }
  
  .border-red {
    border-color: red !important;
  }
  
  .border-blue {
    border-color: blue !important;
  }
  
  .border-green {
    border-color: green !important;
  }
  
  .border-2 {
    border: 2px solid #000;
  }
  
  .border-1 {
    border: 1px solid #000;
  }
  
  .column {
    float: left;
    padding: 5px;
  }
  
  .left,
  .right {
    width: 20%;
  }
  
  .middle {
    width: 60%;
  }
  
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .background-blue {
    background-color: #b3dcff;
  }
  
  .background-green {
    background-color: #b3ffd1;
  }
  
  .text-center {
    text-align: center;
  }
  
  .height-50 {
    min-height: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="fa"&gt;
  
  &lt;head&gt;
    &lt;title&gt;Mahdi Pishguy&lt;/title&gt;
  
    &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="row py-3 px-3"&gt;
      &lt;div class="column text-center left background-blue"&gt;left&lt;/div&gt;
      &lt;div class="column middle background-green text-center"&gt;
        &lt;div class="row"&gt;
          &lt;div class=""&gt;Header&lt;/div&gt;
          &lt;div style="height: 100%;"&gt;
            Content
          &lt;/div&gt;
          &lt;div class=""&gt;Footer&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="column height-50 text-center right background-blue"&gt;right&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>