CSS - 包含絕對定位子元素的元素的自動高度？

我正在開發的網站我有一個<nav>元素包含一個2級別的<ul>，我絕對將子列表（nav ul li ul）定位在主列表的右側。CSS - 包含絕對定位子元素的元素的自動高度？

我遇到的問題是當子列表比主列表更長（更高）時，由於子列表被絕對定位，元素不能適應它。看到下面的圖片爲我的意思的例子。

enter image description here

我的HTML如下：

<nav> 
    <ul> 
     <li><a href="#">List 1</a></li> 
     <li> 
      <a href="#">List 1</a> 
      <ul> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
       <li><a href="#">List 2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">List 1</a></li> 
     <li><a href="#">List 1</a></li> 
     <li><a href="#">List 1</a></li> 
     <li><a href="#">List 1</a></li> 
     <li><a href="#">List 1</a></li> 
     <li><a href="#">List 1</a></li> 
     <li><a href="#">List 1</a></li> 
    </ul> 
</nav><!-- /nav -->

解決這個任何想法？理想情況下，我想保留它作爲語義原因的嵌套列表。

謝謝！

UPDATE：

請看下面的jsfiddle的工作的例子 - http://jsfiddle.net/TcYBQ/

來源

2011-09-20 Probocop

您可以添加您當前的CSS +使[的jsfiddle演示（http://jsfiddle.net /）？ – thirtydot

我已經更新了我的問題，並提供了一個鏈接到一個jsFiddle – Probocop

一個類似的問題，可以幫助你：http://stackoverflow.com/questions/1650539/how-to-clear-absolutely-positioned-elements – derekerdmann

爲了解決這個問題，我使用了jQuery的鏈接到問題的變化由@derekerdmann

var maxHeight = 0; 
$('#top nav ul').each(function() { 
    var tmpHeight = $(this).height() + $(this).position().top; 

    if (tmpHeight > maxHeight) { 
     maxHeight = tmpHeight; 
     $('#top nav').height(maxHeight + 20); 
    } 
});

來源

2011-09-21 09:51:21 Probocop

不能滿足在同一時間所有的約束條件：

父元素必須有正確的身高。
沒有JavaScript。
在HTML中，「列表2」必須在「列表1」內。

要在父級上具有正確的高度，不能在「列表2」上使用絕對定位。不幸的是，沒有其他方法可以將「列表2」移動到它應該在的位置。從這些

取貨：

使用JavaScript來設置高度和保持語義的HTML。
將「列表2」移出「列表1」並避開JavaScript，但犧牲了語義HTML。

我想盡量避免使用JavaScript，除非網站的其他部分高度依賴它。

來源

2011-09-20 11:10:21 thirtydot

我已經去了JavaScript選項，因爲我想維護Tab鍵順序等的語義感謝您的迴應。 – Probocop

CSS - 包含絕對定位子元素的元素的自動高度？

回答

相關問題