title: css calc and min-height can not team up properly
body: <p>i'm building a layout that has dynamic height (as most people do). i've been searching for a while but have not found similar case with mine.
  so here it is, my simplified code:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="body"&gt;&lt;div id="content"&gt;
  content
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="footer"&gt;
      abc
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#footer{
      position: absolute;
      bottom: 0;
      width: 100%;
      background: #ddd;
  }
  #body{
      padding: 60px 50px 70px 50px;
      position: relative;
      min-height: calc(100% - 130px);
  }
  #content{
      font-family: verdana;
      margin-left: 200px;
      border-left: 5px solid #ddd;
      padding: 0 0 0 10px;
      min-height: 100%;
      min-width: 500px;
  }
  body{
      margin:0;
      overflow-y:scroll;
      height:100%;
      position:relative;
  }
  html{
      height:100%;
  }
  </code></pre>
  
  <p>the problem is when i use that code, the content height is not calculated properly and the result look like <a href="http://jsfiddle.net/964AR/12/" rel="nofollow">this fiddle</a> while what i'm trying to do is when the content is short, it should look like <a href="http://jsfiddle.net/964AR/13/" rel="nofollow">this</a> and when the content is long, it should look like <a href="http://jsfiddle.net/964AR/8/" rel="nofollow">this</a>.</p>
  
  <p>if i change the <code>min-height</code> to <code>height</code>, when the content is short, i get what i wanted, but when the content is long, i get <a href="http://jsfiddle.net/964AR/11/" rel="nofollow">this annoying layout</a></p>
  
  <p>it seems <code>calc</code> cannot read the height attribute when it is not specified (using <code>min-height</code>), but if the <code>height</code> is specified, then i can't get dynamic height, is there any other solution to achieve this?</p>
  
  <p><strong>PS:
  what i'm trying to do is to make the border of <code>#content</code> stretches according to its content with minimum height of a page height</strong></p>
  
  <p><strong>note</strong>:</p>
  
  <p>another strange fact is, actually my current code is working on latest chrome and IE, but have this problem on latest firefox and opera. i was trying to reproduce the problem using jsfiddle, and to my awe, all of the browsers have the same issue, i have included all the related html and css (copy the generated html and css) to jsfiddle only to find that my code is not working at all, i'm very confused</p>