title: iFrame not expand to 100% height
body: <p>I have this below html. And I would like the iFrame to cover the rest of the screen with 100% on whatever left. I tried "100%" and "*" in height attribute but not working. Why is that? Thanks</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="container-frame"&gt;
              &lt;img id="if-logo" height="35" width="84" alt="Kucku" src="/Content/Images/logo.gif"/&gt;
              &lt;img id="if-avatar" height="30" width="30" alt="Avatar" src="http://web.kucku.vn/Content/Images/Avatars/default_profile_bigger.png"/&gt;
              &lt;a id="if-username" href="/nvthoai"&gt;nvthoai&lt;/a&gt;
              &lt;div id="if-box"&gt;
              &lt;/div&gt;
              &lt;a id="if-close" href="http://www.yahoo.com" target="_top"&gt; &lt;/a&gt;
              &lt;div id="if-link"&gt;
              &lt;/div&gt;
              &lt;div id="if-star"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;iframe id="mainFrame" frameborder="no" width="100%" title="mainFrame" framespacing="0" border="0" name="mainFrame" src="http://www.yahoo.com" style="display: block; width: 100%; float: left; height: 100%;"&gt;
              &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
              &lt;/html&gt;
          &lt;/iframe&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  
  
  
  #container-frame {
  background:#E1E1E1 url(../images/if_bg.gif) repeat-x scroll 0 0;
  height:35px;
  width:100%;
  }
  </code></pre>