css - Div 包含绝对定位元素，因此没有高度

Question

我正在使用 cycle.js 创建一个旋转的横幅。该循环通过在横幅链接上使用 position:absolute 来工作。

问题是，包含的 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>

Answer 1

我猜你唯一的选择是将事件处理程序绑定(bind)到 ready和 resize为了通过 Javascript 检测您的 window 宽度(或您当前的图像 height)来设置 .slideshow 的 height > 如果您愿意；Cycle 提供了一个 pretty complete API，例如，您可以通过它在更改图像时绑定(bind)一个回调函数以设置您的新高度)。

因为无论如何您都在使用 Javascript 来处理当前的图像尺寸，所以这不应该成为问题。

无论如何，也许您应该考虑使用另一个 slider 插件(或编写您自己的函数)来满足您的需求，而不是使用 position: absolute。 Cycle 很旧，可能不是以响应式的心态构建的(我知道同一个开发人员正在使用更现代的方法处理 Cycle 2)。