Question

我是Javascript的新手，需要一些帮助！我遇到的问题源于我的幻灯片标题。我需要将标题的宽度设置为100％，以便它占据整个屏幕。然而，因为它是一个幻灯片放映，我的图像都是绝对定位的，这使我的标题div脱离了其他所有的流程，所以事情重叠并且看起来很混乱。

我现在有一个廉价且蹩脚的“修复”，我已经将我的页脚边距设置为38％以补偿标题。但是在高分辨率下，这不起作用，它仍然重叠。

我想要做的是使用Javascript或JQuery来检测幻灯片中图像的高度（根据浏览器的宽度而变化），然后将标题的高度设置为该值，从而消除了我糟糕的CSS绑定这并不是我需要的方式。

这是该网站，因此您可以了解我正在处理的内容： http://www.legacyofdesigns.com/

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>

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

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

Answer 1

我明白了！

CSS：我将#header的位置改为亲戚......

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

设置弹性Div的高度

1 个答案: