计算子元素的高度

Question

我有一个带导航项目的菜单。 除了li之外，所有元素的高度均为100％。

<nav id="main_nav" role="navigation">
    <ul class="nav">
        <li><a href="#">Some link</a></li>
        <li><a href="#">Some link</a></li>
        <li class="more_categories">
            <ul>
                <li class="deep_link"><a href="#">Some deep link</a></li>
                <li class="deep_link"><a href="#">Some deep link</a></li>
                <li class="deep_link"><a href="#">Some deep link</a></li>
            </ul>
        </li>
    </ul>
</nav>

请参阅http://jsfiddle.net/hKTrt/1/

我需要让li.more_cateogires拥有剩余空间的高度。

我不确定在最后一个之前我有多少李，但含有ul的李总是最后的。

Answer 1

使用css tables

<强> UPDATED FIDDLE

CSS

.nav 
{ 
    height: 100%; 
    display:table;
    width:100%; 
}
.nav > li
{
    display:table-row;
}
.nav .more_categories
{
    height: 100%;
    background: pink;
}