DIV Attached to Bottom of Viewport

Question

I've read some of the other posts on how to get a DIV to attach to the bottom of the viewport - and I've implemented one solution with success, but I'm running into a bit of an issue.

At: http://s222894377.onlinehome.us/

You can see there is an image stretched 100% in a DIV I created and attached. The DIV above it is set to height: 100%;

But it's taking up a bit too much vertical space and I'm trying to compensate it's effect on the overall height.

The structure is:

<div id="header">
<div id="page-bg">
<div class="CustomFooter">

I've tried variations on setting negative margins to the top and bottom margins and padding to compensate for the header height, but haven't figured it out yet.

If anyone has some suggestions - it would be much appreciated.

Thanks in advance,

mm

Answer 1

If you're trying to attach something to the bottom of the browser window and keep it there, perhaps you might be interested in the CSS position: attribute?

http://www.w3schools.com/Css/css_positioning.asp

Specifically, position: fixed; and then specify bottom: 0; to attach the bottom of something to the bottom of the browser.

Answer 2

I think you're going to run into problems if you try to specify a height on your upper div. It gets complicated and messy to do it this way.

Try this:

On your upper content div, don't set a height; but do set bottom-padding to 100px, or some over value that allows for the bottom div to display its full content without overlapping. This way, your main content will flow normally, and take up just as much space as it needs, but it won't be interfered with by the bottom div.