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

UPDATED FIDDLE

CSS

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