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
- <div id="intro">
<div id="top-bar"></div>
<div class="title">sdasfas</div>
</div>
CSS
- #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)
- <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.