Mixture of position:absolute and fixed

Question

Can anybody think of a non-Javascript way to do the following:

• There is a DIV element somewhere on the screen. Its position can not be predicted.
• It has a fixed width, and should overlap all the other content in the document, ie. it has "position" set to "absolute".
• This is the catch: I want the bottom edge of the DIV to be glued to the bottom of the Viewport. I tried giving the element "bottom: 0px", but in absence of a "height" setting, the whole DIV moves down to the bottom corner, which is not what I want. I want it to stretch from the random position in the document to the bottom edge of the viewport.

I cannot see a solution without using JavaScript, but maybe somebody has a brilliant idea.

Answer 1

I believe the following is not IE6 compatible, but works on all other browsers. With the bottom, you should also give it a top. Once you set the height, it will take precedence (I gave it a border so you can see it stretching):

<div style="position:absolute;top:150px;bottom:10px;width:100px;border:1px solid red;">
    I'm stretched to the  bottom
</div>

Answer 2

try this

http://www.doxdesk.com/software/js/fixed.html

also try to check position:relative; position:static; position:fixed;

Thanks freeweb.pk

Answer 3

I guess this one is not solvable. I am accepting my own answer in this case.