0

I have some nested <ul>s and I want them to be the same height: the height of the tallest one. I cannot specify the height of any <ul> since it depends on the amount of <li>s in it.

I figure I could solve this pretty easy using some js, but I am curious if this could be fixed using CSS.

I created a simple fiddle to demo: http://jsfiddle.net/vnFLK/2/

<nav>
    <ul>
        <li>Li 1
            <ul>
                <li>Sub 1</li>
                <li>Sub 2</li>
            </ul>
        </li>
        <li>Li 2
            <ul class="green">
                <li>Sub 1</li>
                <li>Sub 2</li>
                <li>Sub 3</li>
            </ul>
        </li>
    </ul>
</nav>

The <ul> with green borders is supposed to determine the height of the root <ul> and then I want the sibling <ul> to get the same height. The green <ul> is pushed 200% to the right just to be clearer.

This is a simplified representation of a navigation where a <ul> is a submenu that is going to be pulled over the parent one. Therefore they need to be the same height to prevent the parent menu being shown.

/Erik

4

1 回答 1

0

绝对定位的元素不再是文档流的一部分——它们充当新的上下文。因此，父元素不知道子元素的大小，也无法调整自己的大小以匹配它。

没有针对此的 CSS 解决方案。您需要使用 JavaScript。

于 2013-10-16T15:36:21.150 回答