Div содержит абсолютный позиционированный элемент, поэтому не имеет высоты

Я использую cycle.js для создания вращающегося баннера. Цикл работает с использованием position:absolute на баннерной ссылке.Div содержит абсолютный позиционированный элемент, поэтому не имеет высоты

Проблема заключается в том, что содержащий div теперь имеет высоту нуля, и, следовательно, содержимое ниже перекрывается и скрывается.

Как я могу сделать div slideshow иметь высоту? Нужно быть отзывчивым, поэтому не может быть установленной высоты.

<div id="feature"> 
    <div class="slideshow" style="position: relative;"> 
     <a href="/guarantees.aspx" style="position: absolute; top: 0px; left: 0px; 
       display: none; z-index: 2; opacity: 0; width: 682px; height: 258px;"> 
      <img alt="" src="/images/mobile/banner1.jpg"> 
     </a> 
     <a href="/fencing.aspx" style="position: absolute; top: 0px; left: 0px; 
      display: block; z-index: 3; opacity: 1; width: 682px; height: 259px;"> 
      <img alt="" src="/images/mobile/banner2.jpg"> 
     </a> 
    </div> 
    <div id="pageNav"> 
     <a href="#" class="">&nbsp;</a> 
     <a href="#" class="activeSlide">&nbsp;</a> 
    </div> 
</div>

источник

2013-04-08 Francesca

Почему это не может быть с установленной высотой? Вы пробовали процент? Как 'height: 100%'? –

@MaximGrishin height 100% не работает (по-прежнему выдает 0 высоту), он не может быть установлен, так как высота зависит от ширины браузера, поэтому его необходимо расширить до заданного содержимого в div. – Francesca

Можете ли вы привести пример своей проблемы? Я только что добавил фоновый цвет к вашему второму тегу 'a', и он не скрыт. http://jsfiddle.net/A5SJJ/ –

Я думаю, ваш единственный вариант, чтобы связать обработчик событий с ready и resize для того, чтобы установить height из .slideshow через Javascript, обнаруживая свою window ширину (или с текущим изображением height, если вы так хотите, Cycle предложения a pretty complete API, через который вы могли бы, например, связать функцию обратного вызова при смене изображения, чтобы установить новую высоту).

Поскольку вы используете Javascript для обработки ваших текущих размеров изображения в любом случае, это не должно стать проблемой.

В любом случае, возможно, вам следует рассмотреть возможность использования другого плагина слайдера (или написать свою собственную функцию), который удовлетворяет ваши потребности, не используя position: absolute. Цикл довольно старый и, вероятно, не строился с отзывчивым mindset (я знаю, что тот же dev работает на Cycle 2 с более современным подходом).

источник

2013-04-08 10:43:31 Sunyatasattva

Div содержит абсолютный позиционированный элемент, поэтому не имеет высоты

ответ

Смежные вопросы