Javascript not completely accounting for the height of an element

Question

Yeah. The reason you are having problems is because you are using Disqus. Disqus generates the entire comments section of your site, via JavaScript, after the page loads, and likely after your JavaScript magic runs as well. However, after a little google research, I found that you apparently can send a callback after disqus completes its loading. Here is an example of how to do what you need. Keep everything the same except the javascript:

function disqus_config() {
  this.callbacks.afterRender.push(function() {
    (function($){
      $(window).resize(function(){
        // you dont need the + 'px' stuff. jquery does this for you by default
        $('#menuOption').css({ height:$('#contentWrapper').height() });
      }).resize();
    })(jQuery);
  });
}

Here is a link to the article I found about it. Apparently it is undocumented in their api docs.

http://www.electrictoolbox.com/running-javascript-functions-after-disqus-loaded/

EDIT: (if you use the WordPress Disqus Plugin)

After my initial post, I got some comments saying that is was not working. So I went and tested it on one of my client's dev sites. Sure enough, it did not work; however, I tracked down why, for my client and the poster, and statistically, most other users who will need this.

Most of my clients use WordPress, by my suggestion. WordPress has a plugin for Disqus, published by Disqus, that enables Disqus comments with relatively little work. After some investigation, I found that this plugin makes it's own disqus_config() function, much like the one I posted. That being said, they do not build in a way, currently, so that you can easily add your own code into that function, like a good WordPress plugin would be coded (like I code my plugins).

With that in mind, you must, unfortunately, edit the plugin, to add in your code. This is generally bad practice, because every time you update the plugin, your code will go away. But, sometimes, poorly coded plugins don't leave you a choice, and you have to, in order to achieve what you want (or create a complete copy of the plugin and make your one change, and call it your own, like others seem to do). Here is how to edit your Disqus Comment System WordPress plugin, to fit your needs:

From your WordPress install document root, open the following file:

wp-content/plugins/disqus-comment-system/comments.php

In the current most up to date version of the plugin, on line 55, you see something like:

var disqus_config = function () {

This function ends around line 93. Paste your code in between those two lines, like this:

var disqus_config = function () {
    // ADD THIS CODE
    this.callbacks.afterRender.push(function() {
      (function($){
        // SPECIAL SAUCE
        $(window).resize(function(){
          // you dont need the + 'px' stuff. jquery does this for you by default
          $('#menuOption').css({ height:$('#contentWrapper').height() });
        }).resize();
      })(jQuery);
    });
    // END ADD THIS CODE

    // copied from the plugin
    var config = this; // Access to the config object
    config.language = '<?php echo esc_js(apply_filters('disqus_language_filter', '')) ?>';

    /*
       All currently supported events:
        * preData — fires just before we request for initial data
        * preInit - fires after we get initial data but before we load any dependencies
        * onInit  - fires when all dependencies are resolved but before dtpl template is rendered
        * afterRender - fires when template is rendered but before we show it
        * onReady - everything is done
     */
     console.log(config);

    config.callbacks.preData.push(function() {
        // clear out the container (its filled for SEO/legacy purposes)
        document.getElementById(disqus_container_id).innerHTML = '';
    });
    <?php if (!get_option('disqus_manual_sync')): ?>
    config.callbacks.onReady.push(function() {
        // sync comments in the background so we don't block the page
        var script = document.createElement('script');
        script.async = true;
        script.src = '?cf_action=sync_comments&post_id=<?php echo $post->ID; ?>';

        var firstScript = document.getElementsByTagName( "script" )[0];
        firstScript.parentNode.insertBefore(script, firstScript);
    });
    <?php endif; ?>
    <?php
    $sso = dsq_sso();
    if ($sso) {
        foreach ($sso as $k=>$v) {
            echo "this.page.{$k} = '{$v}';\n";
        }   
        echo dsq_sso_login();
    }   
    ?>  
};

With this edit, your special code should run at the right time. It uses the same method I describe above, which after some research does still work, but it does require that you edit the plugin, unfortunately.

Hope this helps many people; because, while Disqus has some great benefits, it does make times hard on developers sometimes.