How to increase height of an element upwards?

The HTML Code:

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
</ul>

If i add one more li in the list, its height grows downwards. But i would like keep the list bottom static and increase its height upwards.

Update: I am trying to keep a small bar in the bottom of browser window always. When user picks something, the bar will show the item. If it more than o开发者_运维百科ne item, the container has to auto increase its height upwards.

How to do it?

Any suggestions would be appreciative!

Thanks!

So I guess your list should be in absolute position width a specified bottom.

What you want to do is set the bottom property like this

<ul style="position:absolute;bottom:1px;">
         <li>A</li>
         <li>B</li>
         <li>C</li>
         <li>D</li>
         <li>E</li>
         <li>F</li>
     </ul>

This will put the block at the bottom of whatever block it is in.

My best guess would be to make the ul position:absolute. And in your script when you add an item subtract the x position by the height of the item. Of course position:absolute would take the list out of the normal flow.