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

爲什麼不能設定高度？你嘗試過百分比嗎？像「身高：100％」一樣？ – 2013-04-08 10:20:16

@MaximGrishin高度100％不起作用（仍然輸出0高度）它不能設置，因爲高度取決於瀏覽器的寬度，所以需要擴展到div內的給定內容。 – Francesca 2013-04-08 10:24:42

你能舉一個你的問題的例子嗎？我剛剛爲第二個'a'標籤添加了背景顏色，並且它沒有隱藏。 http://jsfiddle.net/A5SJJ/ – 2013-04-08 10:27:07

我猜你唯一的選擇是事件處理程序綁定到ready和resize爲了通過檢測您的window寬度（或與您的當前圖像height，如果你願意的話設置的.slideshow通過JavaScript的height;循環報價一個pretty complete API通過它你可以例如綁定一個回調函數改變圖像來設置你的新高度）。

由於您正在使用Javascript處理您當前的圖片尺寸，因此不應該成爲問題。

在任何情況下，也許你應該考慮使用另一個滑塊插件（或編寫自己的函數），通過不使用position: absolute來滿足您的需求。週期是相當古老的，可能不是與響應心態（我知道，同一個開發工作在Cycle 2與更現代的方法）。

來源

2013-04-08 10:43:31 Sunyatasattva

Div包含絕對定位元素因此沒有高度

回答

相關問題