html - CSS 显示 : table-row set height

Question

我想以百分比值设置特定高度。但是 display: 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%;
}