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似乎没有被浏览器接收。

我一直在搜索，我遇到的唯一解决方案是设置身体和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;添加到菜单选项类，以使height属性起作用。像这样：

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

以上是上述内容：https://jsfiddle.net/AndrewL32/e0d8my79/17/

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

1 个答案: