Установка высоты упругого элемента - PullRequest
Новая
       19

Установка высоты упругого элемента

1 голос
/ 09 декабря 2011

Я очень новичок в 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 с относительным позиционированием.

1 Ответ

1 голос
/ 13 декабря 2011

Я понял это!

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