css max-height of child of inline-block element not working

Question

I'm trying to create a menu the size of the viewing window that is split into 9 equal boxes. Here's what I have so far

PS. I HAVE tried display: table, but I want to control the overall size of the table and not have it fit the content size

html:

<div class='nav'>
      <!-- this will be a 9 box nav  3 rows 3 columns...-->
      <div class='row'>
          <a class='cell' href=''>
              <img src='' class='icon'/>
          </a>
          <a class='cell' href=''>
              <img src='' class='icon'/>
          </a>
          <a class='cell' href=''>
              <img src='' class='icon'/>
          </a>
      </div>
</div>

note: I've removed the actual links since they won't work here anyway

css:

*, *:before, *:after {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box; 
}

/*size the menu to fit in the viewing window*/
body div.nav {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
}

/* size the rows to be 1/3rd the height of the page*/
body div.nav div.row {
    text-align: center;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    max-height: 32.5%;
    height: 32.5%;
    min-height: 32.5%; 
}

/* set the cells to take up 1/3rd of the width */
body div.nav div.row a.cell {
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;
    max-width: 32.5%;
    min-width: 32.5%;
    max-height: 100%;
}

/* limit the image to fit in the parent link */
body div.nav div.row a.cell img {
    max-height: 100%;
    max-width: 100%; 
 }

It's the last part that isn't working. The image resizes width-wise, but the max-height doesn't seem to be working. Any ideas? Thanks in advance for the help, this is driving me batty

NOTE: this does seem to work in safari but not chrome or firefox

Answer 1

Try adding this to the CSS, you cannot use % height unless the parent's height is defined.

*, html, body
{
  height: 100%;
}