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 - 包含绝对定位子元素的元素的自动高度？

回答

相关问题