How to get element to fill 100% height of parent

Question

I have a simple horizontal menu. Using CSS display:table and display:table-cell , I've made the menu "justified". When the menu gets narrow enough, the text in some of the <a> elements wraps onto 2 lines, thereby increasing the height of those items. The rest of the unwrapped <a> elements stay at the height of 1 line of text, ruining the effect. How do I make all the <a> elements fill up 100% of the height of their containing <li> ?

Limitations:

• Can't use Javascript to dynamically calculate the height
• Can't use Flexbox, as some supported browsers don't support Flexbox

I have an example here: http://codepen.io/anon/pen/cyJEt?editors=110 , using this code:

<ul class = "nav-mega">
  <li>
    <a href = "#">Two words</a>
  </li>
  <li>
    <a href = "#">More words</a>
  </li>
  <li>
    <a href = "#">Word</a>
  </li>
  <li>
    <a href = "#">Word</a>
  </li>
  <li>
    <a href = "#">More words</a>
  </li>
  <li>
    <a href = "#">End</a>
  </li>
</ul>

.nav-mega {
  padding:0;
  margin:0;
  display: table;
  width: 100%;

}
.nav-mega > li {
  display: table-cell;
  min-width: 10%;
  background:green;
}
.nav-mega > li a {
  display: block;
  background:red;
  outline:1px solid black;
  padding:10px;
}

Answer 1

.nav-mega {
 padding:0;
 margin:0;
 display: table;
  width: 100%;
  height:100%;
 }
.nav-mega > li {
 display: table-cell;
 min-width: 10%;
 background:green;
 height:100%
}
.nav-mega > li a {
  display: block;
 background:red;
 outline:1px solid black;
 padding:10px;
 height:100%
}

adding height 100% to all parents up to html will work

Answer 2

Just needed to shuffle where you were adding attributes.

Put the background and outline on the li instead of the a.

.nav-mega > li {
  display: table-cell;
  min-width: 10%;
  background:green;
   background:red;
  outline:1px solid black;
}

DEMO