CODEWITHSUNDEEP
javascripthtmlcss
Phil
Phil

Reputation: 14641

fixed positioning of an image at the bottom of a DIV

I have a div (or article or section..) where the main content of the page is shown. (inc.: text, images, paragraphs et al).

What I want is: I want an image top be position at the bottom part of this div. BUT:

If the DIV's height is longer than the browser window's, I want this image to be position at the bottom of the position viewport where it is always visible to the user.

If the DIV's height is shorter than the browser window's viewport, than I want this image to be positioned wherever the DIV's bottom end is located.

EX. 1- DIV is longer than the viewport, so the bottom image is fixed at the bottom of the viewport

The image is represented with -> ...

==================
=   ______       =
=  |      |      =
=  | DIV  |      = 
=  |      |      =  --> VIEWPORT FRAME
=  |      |      =
=  |...   |      =
==================
   |      |      
   |      |      
   |------|

EX. 2- DIV is shorter than the viewport, so the bottom image is fixed at the bottom of the DIV

The image is represented with -> ...

==================
=   ______       =
=  |      |      =
=  | DIV  |      = 
=  |...   |      =
=  |------|      =
=                =
==================

I can achieve this with JavaScript, of course. But I would like to instead find out if this is achievable with using extra layer DIVs or wrappers or other sorts of CSS positioning. ]

If CSS-HTML way is not possible, what would be the best JS logic to employ to get this done?

1) Page loaded: compare height's and position the image accordingly and if scrolling is done re-calculate and re-position?

Thank you.

Upvotes: 0

Views: 1240

Answers (1)

Rick Donohoe
Rick Donohoe

Reputation: 7271

Don't quote me on this as I'm not 100% certain but maybe you could change the positioning of the DIV from relative to absolute dynamically using JQuery.

I'm thinking something like if it is not in view

position: absolute;
bottom: 0px;

else

position: relative;
bottom:0px;

That way the absolute position would fix it to the bottom of the page, otherwise the relative positioning would fix it to the bottom of its parent div.

If you create a fiddle I (or anyone else) could have a little play around with this for you.

Hope that helps!

Upvotes: 1

Related Questions