html - 高度以像素为单位，而不是百分比

Question

我正在尝试使用以下 html 设置创建一个简单的菜单:

<div class="container">
    <div class="container-cell">
        <a href="play.html">
            <div class="menu-option no-margintop">
                <div class="play-icon">
                    <span class="helper"></span><img src="./img/icon_1.png"/>
                </div>
                <div class="menu-text"><span>Play</span></div>
            </div>
        </a>
        <a href="index.html">
            <div class="menu-option">
                <div class="play-icon">
                    <span class="helper"></span><img src="./img/icon_3.png"/>
                </div>
                <div class="menu-text"><span>Highscore</span></div>
            </div>
        </a>
        <a href="index.html">
            <div class="menu-option">
                <div class="play-icon">
                    <span class="helper"></span><img src="./img/icon_2.png"/>
                </div>
                <div class="menu-text"><span>FAQ</span></div>
            </div>
        </a>
    </div>
</div>

在创建这个过程中，我从硬像素切换到百分比。虽然设置高度的像素版本有效，但它似乎不适用于百分比。一个特定类的高度，menu-option，似乎没有被浏览器拾取。

我已经搜索了一段时间，我遇到的唯一解决方案是为 body 和 html (100%) 设置高度。我还为任何容器元素设置了高度。

参见下面的 CSS:

html, body{
    height:100%;
}

.container {
    display:table;
    width:100%;
    height:70%;
}

.container-cell {
    display:table-cell;
    vertical-align: middle;
    height:100%;
}

.menu-option{
    width:90%;
    margin-left:5%;
    border-radius:10px;
    background-color:rgba(17,23,28,0.2);
    height:6.94%;
    margin-top:5%;
    font-size:150%;
}

为什么浏览器没有选择百分比高度，如何让它使用百分比高度？

Answer 1

将 display: inline-block; 添加到您的菜单选项类中，以使高度属性起作用。像这样:

.menu-option{
    display: inline-block;
    width:90%;
    margin-left:5%;
    border-radius:10px;
    background-color:rgba(17,23,28,0.2);
    height:6.94%;
    margin-top:5%;
    font-size:150%;
}

这是上面的一个 jsfiddle:https://jsfiddle.net/AndrewL32/e0d8my79/17/