Javascript 设置弹性Div的高度

我对Javascript非常陌生，需要一些帮助！我的问题根源于我的幻灯片标题。我需要将标题的宽度设置为100%，以便它占据整个屏幕。然而，因为这是一个幻灯片，我的图像都是绝对定位的，这使我的头div从其他所有的流中消失，所以事情重叠，看起来很混乱

我现在有了一个廉价而蹩脚的“修复”，我把页脚的页眉边距上限设置为38%，以补偿页眉。但在高分辨率下，这是行不通的，而且仍然存在重叠

我想做的是使用Javascript或JQuery检测幻灯片中图像的高度（根据浏览器的宽度而变化），然后将标题的高度设置为该值，从而消除我的蹩脚CSS绷带，这些绷带并不是我所需要的

这是网站，您可以了解我正在处理的问题：

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>

需要注意的是，页眉和页脚都包含在一个具有相对位置的容器div中。

我找到了它

CSS：我将#标题的位置更改为相对位置

#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;}

…我添加了此功能，以根据img.active的高度计算收割台div的高度：

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

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

我知道了

CSS：我将#标题的位置更改为相对位置

#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;}

…我添加了此功能，以根据img.active的高度计算收割台div的高度：

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

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

---

我很抱歉；我很难想象这个问题。你能提供一些我可以用来在本地轻松重现问题的代码和/或显示原始问题的示例页面吗？嗨！谢谢你的回复。该问题在www.legacyofdesigns.com的主页上。目前除了预加载程序和幻灯片功能外，没有其他JS。这是问题区域的CSS：#页眉{位置：绝对；页边距顶部：-150px；宽度：100%；}#页眉img{位置：绝对；顶部：0px；宽度：100%；}#页脚{位置：相对；页边距左侧：自动；页边距右侧：自动；页边距顶部：38%；宽度：1000px；}我希望JS检测页眉div的高度，这样我就不必在页脚上使用边距top:38%。我希望这有助于你了解我的目标！我在这里添加了代码，希望能有所帮助！我很抱歉；我很难想象这个问题。你能提供一些我可以用来在本地轻松重现问题的代码和/或显示原始问题的示例页面吗？嗨！谢谢你的回复。该问题在www.legacyofdesigns.com的主页上。目前除了预加载程序和幻灯片功能外，没有其他JS。这是问题区域的CSS：#页眉{位置：绝对；页边距顶部：-150px；宽度：100%；}#页眉img{位置：绝对；顶部：0px；宽度：100%；}#页脚{位置：相对；页边距左侧：自动；页边距右侧：自动；页边距顶部：38%；宽度：1000px；}我希望JS检测页眉div的高度，这样我就不必在页脚上使用边距top:38%。我希望这有助于你了解我的目标！我在这里添加了代码，希望能有所帮助！