エラスティック部門の身長を設定する

Question

私はJavascriptをとても使い慣れており、何か助けが必要です！私が持っている問題は、スライドショーのヘッダーに根ざしています。ヘッダーの幅を100％に設定して、画面全体を占有する必要があります。しかし、それはスライドショーなので、私の画像はすべて絶対的に配置されているので、ヘッダーdivを他のものの流れから取り除くので、物が重なり合って乱雑に見えます。

ヘッダーを補うために私のフッタの余白を38％に設定したところ、値段は安いです。しかし、高解像度では、これはうまくいかず、まだ重複しています。

私がしたいことは、JavascriptまたはJQueryを使用してスライドショーの画像の高さを検出し（ブラウザの幅に応じて変わります）、ヘッダーの高さをその値に設定して、私がそれらに必要な方法で実際に働いていないバンデイズ。ここで

サイトですので、あなたは、私が扱っています何の感覚を得ることができます。 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 {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;} 

に＃ヘッダーの位置を変更...及びIはimg.activeの高さに基づいて、ヘッダのdivの高さを計算するためにこの機能を追加：

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

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