CSS顯示：表行設置高度

Question

我想以百分比值設置特定的高度。 但是顯示：table-cell不想設置任何高度。

HTML：

    <div id="navigation">
        <div class="title">Titel</div>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>

CSS：

#navigation{
    display: table;
    width: 15%;
    height: 100%;
    padding-top: 6%;
    background-color: silver;
}
.title{
    display: table-row;
    width: 100%;
    height: 5%;
    background-color: lime;
}
#navigation ul li{
    display: table-row;
    width: 100%;
    height: 5%;
}
#navigation ul li a{
    display: table-cell;
    width: 100%;
    height: 5%;
    background-color: olive;
}

有關更多信息，請查看我的JSFIDDLE

非常感謝你！

Answer 1

表行（ li ）的父級（ ul ）不是表，並且自身不具有高度。

目前，您有：

#navigation ul {
    display: block;
    height: auto;
}

要獲得想要的東西，可以嘗試以下方法：

#navigation ul {
    display: table;
    height: 100%;
}

Answer 2

刪除.title CSS width:100% ，僅使用height試試看