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

我正在尝试使用以下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{
    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%;
}

下面是上面的一部分：
很有效！谢谢；）但我很好奇，为什么需要这样做？内联块元素类似于内联元素，但它们可以有特定的宽度和高度。检查此链接：勾选的答案对不同类型的显示元素给出了非常描述性的解释：），因为内联元素不能设置高度。百分比只有在基于设置了高度的父元素时才起作用。这就解释了。谢谢你们的帮助！
.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%;
}