Setting margin on an element according to browser height and another element's height using JQuery

Question

I'm coding for a site with a title in a div that is tilted at 270 degrees and is fixed to the page bottom; this title changes for each page and I'd like the content to begin at the same vertical height as the title starts on page load. So say the browser is 900px high and the title is 500px I'd like the top-margin of the content div to be 400px. Is there an easy-ish way to do this with JQuery? I know you'd have to get both heights first and then form an equation, but I'm too amateur at JQuery to do so. Help?

Answer 1

You can do it with the following script, substituting #content with your container and h1 with the heading element fixed at the bottom:

<script type="text/javascript">
$(document).ready(function() {
  $("#content").css("margin-top", $(window).height() - $("h1").height());
});
</script>

This, however, only sets margin-top on page load, so it does not update the margin if the user resizes his browser window. This to the rescue (again replacing the elements, obviously):

<script type="text/javascript">
$(window).resize(function() {
  $("#content").css("margin-top", $(window).height() - $("h1").height());
});
</script>