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.

csscss-position

Pekka

Reputation: 449613

Mixture of position:absolute and fixed

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.

Upvotes: 1

Answers (2)

freeweb.pk

Reputation: 7

try this

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

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

Thanks freeweb.pk

Upvotes: -1

Abel

Reputation: 57169

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>

Upvotes: 2

Mixture of position:absolute and fixed

Answers (2)

Related Questions