css max

css max-height的内联块元素的子元素不起作用(css max-height of child of inline-block element not working)

我正在尝试创建一个与查看窗口大小相同的菜单，该菜单分为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

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

最满意答案

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

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

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

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