title: JQuery .height() not working as expected
body: <p>I am making a calendar website. In this I have a calendar div in which the calendar loads, wrapped inside a content div. <strong>In this header and footer are of fixed position. The calendar loads in the blue part.</strong></p>
  
  <p><img src="https://i.stack.imgur.com/qIZId.png" alt="enter image description here"></p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div class ="content"&gt;
     &lt;div id="calendar"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>.content{
     background: #fcfcfc;
     height: 100%;
     margin: -70px 0 -20px;
     padding: 70px 0 20px;
  }
  
  #calendar{
     background: #fcfcfc;
     margin: 10px 10px 10px 10px;
     border: 1px solid #888;
  
  }
  </code></pre>
  
  <h2>JS</h2>
  
  <pre><code>var calHeight = $(".content").height();
  </code></pre>
  
  <p><strong>From the image I think calHeight should give something around 390 but its giving 594 in chrome and 565 in firefox.</strong>.</p>
  
  <p>What should I do to get calHeight the displayed size?</p>