Question

在我正在开发的网站上的

我有一个<nav>元素，其中包含一个2级<ul>，我绝对将子列表（nav ul li ul）定位在主列表的右侧

我遇到的问题是当子列表比主列表更长（更高）时，由于子列表是绝对定位的，因此元素不会拉伸以适应它。请参阅下图，了解我的意思。

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 -->

有什么想法解决这个问题吗？理想情况下，我希望将其作为语义原因的嵌套列表保留。

谢谢！

更新

请参阅以下jsFiddle以获取工作示例 - http://jsfiddle.net/TcYBQ/

Answer 1

您无法同时满足所有约束条件：

父元素必须具有正确的高度。
没有JavaScript。
在HTML中，“列表2”必须位于“列表1”中。

要在父级上具有正确的高度，您不能在“列表2”上使用绝对定位。不幸的是，没有其他方法可以将“List 2”移动到它应该的位置。

从这些中选择：

使用JavaScript设置高度并保留语义HTML。
将“List 2”移出“List 1”并避免使用JavaScript但牺牲了语义HTML。

我会尽量避免使用JavaScript，除非网站的其他部分高度依赖它。

Answer 2

为了解决这个问题，我在@derekerdmann链接的问题中使用了jQuery的变体

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);
    }
});

CSS - 包含绝对定位子元素的元素的自动高度？

2 个答案: