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

这是最后一个不起作用的部分。图像在宽度方向上调整大小，但最大高度似乎不起作用。有任何想法吗？在此先感谢您的帮助，这让我感到很伤心

注意：这似乎适用于safari但不适用于chrome或firefox

Answer 1

尝试将此添加到CSS中，除非定义了父级的高度，否则不能使用％height。

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

css内联块元素的子节点的最大高度不起作用

1 个答案: