title: How to fix <div> height
body: <p>My have a problem to make DIVs having fixed height. The following is the code.
  All  contains some other elements except the <code>#gridDiv</code>. gridDiv will be attached a grid at run time. and I want the gridDiv occupy 60% of the screen no matter it has grid inside or not. And if the grid is too long to fit in the gridDiv DIV, I wish the gridDiv have a scroll bar. </p>
  
  <p>Currently the gridDiv only has inline height. How can I achieve what I want? Thank you.</p>
  
  <pre><code>&lt;div id="mainDiv" style="display: block"&gt;
  
      &lt;div id="topDiv" style="display: block; height:20%; text-align:center"&gt;&lt;/div&gt;
  
      &lt;div id="bottomDiv" style="display: block; height:80%"&gt;
          &lt;div id="gridDiv" style="display: block; height:80%"&gt;&lt;/div&gt;
          &lt;div id="buttonDiv" style="display: block; width:100%; height:20%; text-align:center"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>