title: How to set min-height of div to fit the screen?
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  .banner{
      width:800px;
      height:160px;
      border:1px solid #000000;
  }
  .main_box{
      width:800px;
      height:300px;
      border:1px solid #000000;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="banner"&gt;&lt;/div&gt;
  &lt;div class="main_box"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here when I set the min-height of <code>main_box" to 100%</code>  nothing happens. </p>
  
  <p>But when I set it's height in pixels, the height is visible. I want to set the height of <code>main_box</code> div to fit the screen.</p>
  
  <p>Does anyone know how to do it?</p>