CODEWITHSUNDEEP
htmlcssheight
Bene
Bene

Reputation: 1281

CSS display: table-row set height

I would like to set a specific height in a percentage value. But the display: table-cell doesn't want to set any height.

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

For further information please have a look at my JSFIDDLE

Thank you very much!

Upvotes: 0

Views: 11317

Answers (2)

Thomas
Thomas

Reputation: 212

The parent (ul) of the table rows (li) is not a table and does not get a height for itself.

Currently, you have:

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

To get what you want you can try this:

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

Upvotes: 4

Sakthi Karthik
Sakthi Karthik

Reputation: 3169

Remove the .title css width:100% and use only height try it

Upvotes: -3

Related Questions