Make Unordered List Height of Parent

Question

I have a menu in an unordered list - I need to make each <li> the height of it's parent. I know this is pretty basic, I am not sure what I am doing wrong.

<div class="menu">
  <ul>
    <li class="current_page_item">
        <a href="#">Home</a>
     </li>
    <li class="page_item page-item-2">
       <a href="index.php/sample-page/">Sample Page</a>
    </li>
 </ul>
</div>

And I have the following CSS:

.main-navigation ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
}

I don't have any CSS rules for the div that contains it.

The above is contained in a tag and I don't have any height set for it. It is the height of an image contained within it. The actual website is: http://notthedroidyouarelookingfor.com/

I need to make each <li> the height of it's parent so I can set a top border when the link is active.

where is the image here in html.? – Himesh Aadeshara Sep 02 '15 at 05:10 — Himesh Aadeshara, Sep 02 '15 at 05:10
Do you want that each `li` has the height of `menu`? – Yandy_Viera Sep 02 '15 at 05:15 — Yandy_Viera, Sep 02 '15 at 05:15

score 0 · Answer 1 · answered Sep 02 '15 at 05:12

You need to set height manually or through script, I believe this cannot achieved in css.

Also the parent 'div.menu' is not the height of logo image because the ul is float:left. You actually need to apply float:left to div.main just in case to make sure you dont face any issues further on that.

score 0 · Accepted Answer · edited May 23 '17 at 11:58

The height of a block element defaults to the height of the block's content. So, given something like this:

<div id="outer">
    <div id="inner">
        <p>Where is pancakes house?</p>
    </div>
</div>

#inner will grow to be tall enough to contain the paragraph and #outer will grow to be tall enough to contain #inner.

When you specify the height or width as a percentage, that's a percentage with respect to the element's parent. In the case of width, all block elements are, unless specified otherwise, as wide as their parent all the way back up to <html>; so, the width of a block element is independent of its content and saying width: 50% yields a well defined number of pixels.

However, the height of a block element depends on its content unless you specify a specific height. So there is feedback between the parent and child where height is concerned and saying height: 50% doesn't yield a well defined value unless you break the feedback loop by giving the parent element a specific height.

The credits of the above are for @muistooshort: https://stackoverflow.com/a/5658062/4966662

I guess you want set the height of each li to vertical align the menu, if I'm right, here you have a workaround using flexbox:

body{
    margin: 0;
}
.main-navigation {
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-shadow: 3px 2px 2px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 2px 2px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 2px 2px 0px rgba(0, 0, 0, 0.75);
    margin-bottom: 4px;
}
#middleNavigation {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    display: flex;
}
.main-navigation a {
    font-size: 1.4rem;
    font-size: 14px;
    font-weight: normal;
    margin-left: 1em;
    text-decoration: none;
    padding: 0 0.8em;
    word-spacing: 4px;
    font-family: Arial;
    color: #000;
    border-top: 4px solid transparent;
    display: flex;
    align-items: center;
}
.main-navigation a:hover {
    border-top-color: #000;
}

<nav role="navigation" class="site-navigation main-navigation">
    <div id="middleNavigation">
        <img src="http://notthedroidyouarelookingfor.com/wp-content/themes/striker/images/NTDYALF-Logo.png" alt="" id="NTDYALFLogo">
      
        <a href="http://notthedroidyouarelookingfor.com/"><span>Home</span></a>

        <a href="http://notthedroidyouarelookingfor.com/index.php/sample-page/"><span>Sample Page</span></a>

    </div>
</nav>
    
<p>Hover the links to see the border</p>

Here a working JSFiddle to play with

@james0200101 let me know if this works for you, or you need something else. — Yandy_Viera, Sep 03 '15 at 23:21

Make Unordered List Height of Parent

2 Answers2