設置彈性分區的高度

我對Javascript非常陌生，需要一些幫助！我遇到的問題植根於我的幻燈片頭。我需要將我的標題寬度設置爲100％，以便它佔據整個屏幕。但是，因爲它是幻燈片放映，所以我的圖像全部都是絕對定位的，這使我的標題div脫離了其他任何東西的流動，所以事情重疊並看起來很亂。設置彈性分區的高度

我有一個便宜又瘸「修復」現在，我已經把我的頁腳邊距至38％，以彌補頭。但在高分辨率下，這不起作用，而且仍然存在重疊。

我想要做的就是使用Javascript或JQuery來檢測幻燈片中的圖像高度（根據瀏覽器的寬度而變化），然後將標題的高度設置爲該值，從而消除我的蹩腳CSS那些沒有真正以我需要的方式工作的bandaids。

這裏的網站，這樣你就可以得到什麼我處理的感覺： 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中。

來源

2011-12-08 Savae

對不起;我很難想象這個問題。你能否提供一些我可以用來輕鬆地在本地重現問題的代碼，和/或顯示原始問題的示例頁面？ – Nicholas

嗨！感謝您的回覆。問題出現在wwww.legacyofdesigns.com的主頁上。除了預加載器和幻燈片功能以外，目前沒有JS。這是有問題的地方的CSS：的#header {位置：絕對的; margin-top：-150px; width：100％;} #header img {position：absolute; top：0px; width：100％;} #footer {position：relative; margin-left：auto; margin-right：auto;保證金率：38％;寬度：1000像素;} 我想JS以檢測所述報頭div的高度，所以我不必須使用邊距：上頁腳38％。我希望這可以幫助你瞭解我想要完成的事情！ – Savae

我在這裏添加了代碼，希望有所幫助！ – Savae

我想通了！

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

...我添加了這個功能來計算頭的div基於img.active的高度高度：

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

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

來源

2011-12-13 00:43:21 Savae

設置彈性分區的高度

回答

相關問題