title: Increasing height of a div while dynamically loading content (it's height is 100%)
body: <p>I have a div(InnerDiv) which contains a grid with paging enabled...<br>
  After some user actions , data inside that grid will load and we will have a big grid!<br>
  The problem is when grid's data loads , overflow the div's bottom portion(InnerDiv) and some of those data get's displayed out of the div.</p>
  
  <p>my css of body and html like below :  </p>
  
  <pre><code>html, body
  {
      margin: 0; /* get rid of default spacing on the edges */
      padding: 0; /* get rid of default spacing on the edges */
      border: 0; /* get rid of that 2px window border in Internet Explorer 6 */
      height: 100%; /* fill the height of the browser */
      border:3px solid red;
  }
  </code></pre>
  
  <p>i need 100% height of body when page loads...  </p>
  
  <p>OuterDiv inside body like below :  </p>
  
  <pre><code>div#OuterDiv
  {
      position:absolute;
      width: 100%;
      height: 100%;
      /*height: auto;*/
      margin: 0px;
      padding: 0px;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      border:5px solid green;
  }
  </code></pre>
  
  <p>InnerDiv Inside OuterDiv Is Like Below : </p>
  
  <pre><code>div#InnerDiv
  {
      position: relative;
      width: 100px;
      height: 100%;
      margin: 0 auto;
      background: transparent url('../Images/Blue.png') repeat scroll left top;
  }
  </code></pre>
  
  <p>Content Inside InnerDiv Like Below :  </p>
  
  <pre><code>#Content
  {
      position: relative;
      top: 10px;
      background: transparent url('../Images/Red.png') repeat scroll left top;
      width: 550px;
      height: 1080px; /*&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; plz see this line*/
      top: 10px;
      right: 10px;
      padding: 7px;
      border: 10px ridge #ce004e;
      color: black;
  }
  </code></pre>
  
  <p>that grid(Content) is inside InnerDiv... </p>
  
  <p><strong>EDIT 1</strong><br>
  the below example can show my situation :<br>
  <a href="http://jsfiddle.net/kNJnJ/" rel="nofollow">Here's an example at jsFiddle</a>  </p>
  
  <p><code>we can not remove position:absolute of OuterDiv , by doing that height:auto or height:100% on it does not work at page start -&gt; outerDiv should be 100% because Of InnerDiv Background and remember InnerDiv height is not 1080px at start -&gt; it is only 200px at page load and dynamically it will change to 1080px!</code></p>
  
  <p>i want to force yellow area (InnerDiv) to fill entire Purple Area...<br>
  also InnerDiv Should Have 100% Height Because Of It's Background At Page Start...  </p>
  
  <p>i know this problem is about 100% height / but how can i fix that ?  </p>
  
  <p><strong>EDIT 2 :</strong><br>
  AT LAST HERE IS MY WEB SITE :<br>
  <a href="http://www.almasbms.com/" rel="nofollow">MY WEB SITE</a><br>
  plz change the height of red area with firebug - so by changing it to 1080px body and OuterDiv And InnerDiv Will grow.<br>
  but at page load i want body and OuterDiv And InnerDiv 100% height.<br>
  how can i do that?  </p>
  
  <p>thanks in advance</p>