Dynamically setting child DIV height to parent DIV height

Dynamically setting child DIV height to parent DIV height

I would like to dynamically set a child DIV height to the parent's DIV height, minus the height of another child element. Something like this:

HTML

  1. <div id="intro">
    <div id="top-bar"></div>
    <div class="title">sdasfas</div>
    </div>

CSS

  1. #intro {
       height: 600px;
    }
    #top-bar {
       height: 180px;
    }

jQuery placed at very bottom of document right before </body> (jQuery library is loaded earlier in the document)

  1. <script type="text/javascript">
    $(window).resize(function() {
        var intro_height = $("#intro").height();
        var topbar_height = $("#top-bar").height();
        var final_height = intro_height - topbar_height;
        $(".title").height(final_height);
        var new_h = $(".title").height();
        alert(new_h);
    });
    </script>

However, I'm not seeing any alert on page refresh or on resize, so I'm sure I don't have this set up quite right.