html - 计算子元素的高度

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 具有可用剩余空间的高度。

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

Answer 1

采用css tables

更新的小提琴

CSS

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