title: Div height based on content
body: <p>I am having a page load within a content div when the document is ready. However, I also have some links that load different pages into that same content div whenever the user clicks on them. I am trying to establish the height of the content div to control something else, however once the height of the div is set on page load, I cannot seem to get the new size of the content div with the new page in it…</p>
  
  <p>For example, the loaded page is 6000px, page 1 is 500px in height and page 2 is 300px in height. When the page loads, the content div is set to 6000px. Yet when I click page 1 to load it into the content div, the content div remains set to 6000px even though the content itself is only 500px in height, same for page 2, etc…</p>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;div id="select"&gt;
      &lt;div id="menu"&gt;
          &lt;ul&gt;
          &lt;li&gt;&lt;a class="load" href="javascript:void(0)" id="page1"&gt;page1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="load" href="javascript:void(0)" id="page2"&gt;page2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="spacer"&gt;&lt;/div&gt;
  &lt;div id="content"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>#select { 
      width: 215px;
      top: 20px;
      left: 10px;
      position: absolute;
      }
  
  #spacer {
      border-right:2px solid #000000;
      left:10px;
      width:215px;
      position: absolute;
      }
  
  #content {
      left: 227px;
      top: 20px;
      width: 703px;
      padding: 0; 
      margin: 0;
      position: absolute;
      }
  </code></pre>
  
  <p>Here is my jquery:</p>
  
  <pre><code>$(document).ready(function() {
      //Load content on page load
      $("#content").html('&lt;ul&gt;&lt;li&gt;Loading Content...&lt;/li&gt;&lt;/ul&gt;')
                   .load("/content/" + "projects.php", null, function() {
                              contentHeight = $("#content").height();
                              selectHeight = $("#select").height();
                              $("#spacer").height(contentHeight + "px")
                                          .css({"top": selectHeight + 40 + "px" });
                   });
      //Load content on click
      $(".load").click(function(){
                      loadName = $(this).attr("id");
                      $("#content").html('&lt;ul&gt;&lt;li&gt;Loading Content...&lt;/li&gt;&lt;/ul&gt;')
                                   .load("/content/" + loadName + ".php", null, function(){
                                      contentHeight = $("#content").height();
                                      selectHeight = $("#select").height();
  
                                      if(selectHeight &lt; contentHeight) {
                                      $("#spacer").css({"top": selectHeight + 40 + "px", "display": "block" })
                                                  .height(contentHeight + "px");
                                      }else{        
                                      $("#spacer").css({"display": "none"}); 
                                      return;
                                      }
                      });
      });
  });
  </code></pre>