內聯塊元素的子代的css max-height無法正常工作

Question

我正在嘗試創建一個菜單，其大小與查看窗口的大小相同，被分成9個相等的框。 這是我到目前為止的

PS。 我曾嘗試過display：table，但我想控制表格的整體大小，而不適合內容的大小

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

注意：我已經刪除了實際的鏈接，因為它們無論如何在這里都無法正常工作

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%; 
 }

這是不起作用的最后一部分。 圖像在寬度方向上調整大小，但是最大高度似乎不起作用。 有任何想法嗎？ 在此先感謝您的幫助，這讓我不寒而栗

注意：這似乎確實適用於野生動物園，但不適用於Chrome或Firefox

Answer 1

嘗試將其添加到CSS中，除非定義了父級的身高，否則不能使用％height。

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