CODEWITHSUNDEEP
htmlcssuser-interface
professormeowingtons
professormeowingtons

Reputation: 3514

100% tall <li> elements without using position:absolute trick?

I want to have a simple HTML layout with several <li> elements inline, each of which has a height:100%

I have used the following CSS trick to accomplish this:

position:absolute;
top:0;
bottom:0;

See my JSFiddle for an example.

For reasons outside the scope of this question, I desire to NOT have my <li> elements positioned absolutely. Can someone chime in on how to achieve this same layout with position:relative; or position:static; <li> elements?

Upvotes: 2

Views: 81

Answers (1)

j08691
j08691

Reputation: 207900

Try this jsFiddle example.

The <li> elements are floated left and use the display:inline-block rule to get the proper height and width. Floating also removes the need for the rules; li.one { left:0; } li.two { left:33%; } li.three { left:66%; }

html, body {
    height:100%;
    margin:0;
    padding:0;
}
ul {
    /* width:100%; */
    /* height:500px; */
    margin:0;
    padding:0;
    list-style:none;
    height:100%;
}
li {
    display:inline-block;
    height:100%;
    background:#333;
    color:white;
    width:33%;
    float:left;
}
li:nth-child(even) {
    background:#666;
}

Upvotes: 1

Related Questions