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

表行（ul）的父（li）不是表，也不会为自己获得高度。

目前，您有：

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

为了得到你想要的东西你可以试试这个：

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

Answer 2

删除.title css width:100%并仅使用height 试试吧

CSS显示：表格行高度

2 个答案: