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:

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/pr%5Fclass%5Fposition.asp

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

Answer 2

I'm not sure if I'm reading your problem correctly, but the only thing that comes to mind is to use something like:

div#content_block
{position: absolute;
top: 3em; /* basically this is 0 + vertical-height of the header; adjust to taste */
left: 0; /* assuming you want the div to stretch across the viewport */
right: 0;
bottom: 3em; /* 0 + vertical-height of footer */
overflow: auto;
}

But this feels horrible, and I can't help but think a better solution could be achieved with a clearer understanding of your problem.

Is there any chance you could post (or link to) an image that describes your intended layout? With relevant margins and off-sets added? Also, posting your code would be a good idea (css and html).

Answer 3

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.