设置弹性Div的高度

Question

I am very new to Javascript, and am in need of some assistance! The issue I am having is rooted in my slideshow header. I need my header's width set to 100% so that it occupies the entire screen. However, because it's a slideshow, my images are all absolutely positioned, which takes my header div out of the flow of everything else, and so things overlap and look messy.

I've got a cheap and lame "fix" right now where I've set my footer's margin-top to 38% to compensate for the header. But at high resolutions, this does not work, and it still overlaps.

What I want to do is use Javascript or JQuery to detect the height of the images in the slideshow (which changes depending on the width of the browser) and then set the header's height to that value, thus eliminating my crappy CSS bandaids that aren't really working in the way I need them to.

Here's the site, so you can get a sense of what I am dealing with: http://www.legacyofdesigns.com/

THE HTML:

<div id="header">
<img src="images/header1.png" alt="" class="active" />
<img src="images/header2.png" alt="" />
<img src="images/header3.png" alt="" />
<img src="images/header4.png" alt="" />
<img src="images/header5.png" alt="" />
</div>

<div id="footer">         
    <ul>
    <li><a href="latest-projects.html"><img src="images/project_button.png"></a></li>
    <li><a href="start-your-legacy.html"><img src="images/start_button.png"/></a></li>
    <li><a href="https://www.facebook.com/legacyofdesigns" target="_blank"><img src="images/facebookFanButton.png"/></a></li>

    </ul>

    <p>© 2011 Legacy of Designs. All rights reserved.
    <br/>Website designed by <a href="http://www.indulgemedia.ca" target="_blank">Indulge Media</a></p>
</div>

THE CSS:

#header {position: absolute; margin-top: -150px; width: 100%;} 

#header img {position: absolute; top: 0px; width: 100%;} 

#footer {position: relative; margin-left: auto; margin-right: auto; margin-top: 38%; width: 1000px;}

It should be noted that both the header and the footer are contained by a container div with relative positioning.

Answer 1

I figured it out!

The CSS: I changed the position of #header to relative...

#header {position: relative; margin-top: -150px; width: 100%;} 

#header img {position: absolute; top: 0px; width: 100%;} 

#footer {position: relative; margin-left: auto; margin-right: auto; margin-top: 38%; width: 1000px;}

...and I added this functionality to calculate the height of the header div based on the height of img.active:

$(document).ready(function() {
$('#header').css("height",$("IMG.active").innerHeight());
});

$(window).resize(function() {
$('#header').css("height",$("IMG.active").innerHeight());
});