使用窗口缩小div菜单

Question

我正在尝试制作一个缩小窗口大小的菜单，我已经通过使用％来调整宽度，但是，我似乎无法让它在高度上工作。

我尝试过使用max-width / height并将它们设置为auto。每当我将高度从px更改为％时，它就会完全消失。

CodePen：http://codepen.io/mikegr/pen/WRdNqo

HTML

'bcadefgh'

CSS

'cad'

Answer 1

您需要.ch-grid li上的可升级高度，例如视口单元vh

.ch-grid li {
    width: 12%;
    height: 50vh;
    display: inline-block;
    margin: 0 auto;
}

Updated codepen

如果你想使用百分比，你需要给所有.ch-grid li父母一个高度，就像这样

html, body {
    height: 100%;
}
.ch-grid {
    margin: auto 0 0 0;
    padding: 0;
    text-align: center;
    height: 100%;
}

.ch-grid li {
    width: 12%;
    height: 50%;
    display: inline-block;
    margin: 0 auto;
}

Updated codepen 2