CODEWITHSUNDEEP
htmlcss
Devon Ville
Devon Ville

Reputation: 2091

Calculating height for child element

I have a menu with navigation items. All of the elements are given height 100%, except the li's.

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

See http://jsfiddle.net/hKTrt/1/

I need to have the li.more_cateogires have the height of the remaining space available.

I'm not sure how many li's I have before the last one, but the li containing the ul is always last.

Upvotes: 0

Views: 63

Answers (1)

Danield
Danield

Reputation: 125443

Use css tables

UPDATED FIDDLE

CSS

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

Upvotes: 1

Related Questions