How do I position an element 40 pixels beneath the lowest reaching DIV on a page when a scrollbar is present?

Question

I am branding several sites I recently created with an image that reacts to hovering and links back to my own site. I'm dynamically inserting the markup and CSS with a jQuery append function that absolutely positions my logo in the bottom righthand corner of the client's site, and it's working great for the most part. However, I need to enhance that positioning to accommodate two different scenarios, and I'm fairly stumped.

If the elements on the site do not reach the bottom of the window, I want the logo in the bottom righthand corner, which is what currently happens. This is great.

If the elements do reach the bottom of the page or beyond, forcing a scrollbar, I want the logo positioned 40px beneath the bottom of the lowest reaching DIV, still in the bottom righthand corner of the page (almost as if it were part of the normal document flow, rather than absolutely positioned). This is what I can't figure out.

Answer 1

One thing you could do, is make your viewport 100% height when there's no scrollbar. When there is a scrollbar, the height will be longer than the viewport.

The advantage is that you could have a container div, which contains all content on the page. Give that div a position relative and position your logo absolute within the container div.

Here's the CSS code:

html, body {

 height: 100%;

}

#container {

 position: relative;

 min-height: 100%;

 height: 100%;

 voice-family: "\"}\"";

 voice-family: inherit;

 height: auto;

}

html>body #container {

 height: auto;

}

Answer 2

You could try making a transparent div with your logo at the bottom and the div's height the same as the scrollable height. I've never done this but that's probably what I would try first. Getting scrollable height is not trivial, I would probably try to get it with jquery. In fact, I would use jquery for anything new you are trying to accomplish in javascript.

Answer 3

The easiest way to solve this problem is to create a relatively-positioned container block just inside your body tag. Then, your logo will be absolutely positioned in relation to that container rather than the viewport. You then need to do a little work to make sure it shows up at the bottom of the page when there isn't enough content to push it down there.

What you are wanting to do is roughly analogous to a css sticky footer: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/