100% Height on LI

Question

How can I obtain to get LI's 100 % in height, just like this:

As you can see, the borders on the LI elements are 100 % in height.

Currently I have this:

<div class="header">
    <div class="row">
        <div class="column grid_13" style="padding-top:5px;">
            <div class="logo"><a href="/"><img src="images/logosmall.png"></a></div> 
        </div><!-- End Grid_3 -->

        <ul class="headerMenu">
            <li>Profile</li>
            <li><img src="images/icons/arrow-down.png" style="vertical-align:middle;"></li>
        </ul>


    </div><!-- End Row -->
</div><!-- End Header -->

This is my CSS. Please note I have not added the "Row" and the "column" or "grid" sections in the CSS, as they are just normal GRID's from 960.css

.header{
    background-image:url("../images/headerstyle.png");
    background-repeat:repeat-x;
   /* height:50px; */
    height:60px;
    border-color:#000;
    border-width:0px 0px 1px 0px;
    border-style:solid;
    -moz-box-shadow: 1px 1px 4px 1px #232323;
    -webkit-box-shadow: 1px 1px 4px 1px #232323;
    box-shadow: 1px 1px 4px 1px #b6b6b6;

}
.headerMenu{
    list-style-type:none;
    margin:0;
    padding:0;

}
.headerMenu li{
    display:inline;
    margin-bottom:10px;
    color:#fff;
    border-color:#086c8a;
    border-width:0px 1px 0px 1px;
    border-style:solid;
    height:100%;  
}

Codi

Does the enclosing UL have any padding? – Rake

The enclosing? The UL class is .headerMenu, and it have padding:0 – Codi

what are you trying to accomplish. From the code snip it looks like you are mimicking a table with divs and one row and then trying to have an unordered list in that rows. Are you wanting the UL to have 100% height of the <div class="row"> element? – Subtractive

sorry for that meta question, but where's that screenshot from? – Daudet

Answer 1

Here is a quick example with no link style but this is how I do it.

http://jsfiddle.net/etienne_carre/ZVXFD/1/

Make sure the ul have no pading and margin and the same height as the header. After create the li the same height as the ul and header.

Strangle

word of advice, jsfiddle has a panel for css, you dont have to put the css in the html panel – Animus

Answer 2

The height: 100% on you li tags doesn't work because you specified display: inline. You can't set the height of an inline element.

You'll either have to use display: inline-block or float: left for this to work.

Note that display: inline-block only works on native inline elements in IE6-7, so it won't work with li tags in those browsers.

Banka

Answer 3

This works for me: http://jsfiddle.net/tonco/UrhTw/2/

<div>
    <ul class="list">
        <li class="item">     
            Test height<br />
            size
        </li>
        <li class="sep">     
            <b></b>
        </li>
        <li class="item">     
            Test height<br />
            size
        </li>
        <li class="sep">     
            <b></b>
        </li>
        <li class="item">     
            Test height<br />
            size
        </li>
    </ul>
</div>

<style>
.list{
    list-style: none;
    display: inline-flex;   
}

.item{
    padding: 5px;
    background: red;
}

.sep{
    width: 1px;
    margin: 5px 2px;
    background: blue;
}
</style>

Skipjack

The JS fiddle is a broken link. – Werra

Answer 4

display: table-cell; on the LI might help

Commode

Answer 5

you could use

display: inline-block

it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings.

There is more info on the pros and cons of inline-block here including ways to get it working in IE7 using MS's zoom property.

Pownall