计算子单元的高度

Question

我有一个带有导航项的菜单。除李氏外，所有元素都有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

更新小提琴

CSS

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