title: Height in percentage is not working in any browser (using bootstrap)
body: <p>Below I have my code. How to use the height in %</p>
  
  <pre><code>&lt;div class="container" &gt;
      &lt;div class="row"&gt;
          &lt;div class="col-" id="t1"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Css</p>
  
  <pre><code>body{
      background-color:aquamarine;
  }
  #t1{       
      height:100%;
      border:1px solid brown;
  }
  </code></pre>
  
  <p>When I use <code>height:100px;</code> It works fine but when I use <code>height:100%;</code> It doesn't work.</p>
  
  <p>How to give the height in percentage using bootstrap for each div?</p>
  
  <p><a href="https://i.stack.imgur.com/fAjNr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fAjNr.jpg" alt="mobile portrate"></a></p>
  
  <p><a href="https://i.stack.imgur.com/AxwZh.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AxwZh.jpg" alt="Landscape"></a></p>