DIV attached to the bottom of the viewport

Question

I read some other posts on how to connect a DIV to the bottom of the viewport, and I successfully implemented one solution, but I ran into some problem.

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

You can see that the image, 100% stretched, was created in a DIV, created by me and attached. The div above it is set to a height of: 100%;

But it takes up too much vertical space, and I'm trying to compensate for its effect on the overall height.

Structure:

I tried the options for setting negative margins on the upper and lower margins and indentation to compensate for the height of the header, but haven't figured it out yet.

If anyone has any suggestions, that would be very grateful.

Thanks in advance,

mm

Answer 1

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

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

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

Answer 2

I think that you will encounter problems if you try to indicate the height in the top div. It becomes complicated and messy to do it this way.

Try the following:

On the top content div, do not set the height; but set the bottom padding to 100 pixels or some excess of the value that allows the bottom div to display its full content without overlapping. Thus, your main content will work fine and take up as much space as it needs, but the lower div will not interfere with it.

Answer 3

I'm not sure if I am 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 seems terrible, and I cannot help but think that a better solution can be reached with a clearer understanding of your problem.

Is it likely that you could place (or link) an image that describes your planned layout? With the addition of appropriate fields and additions? Also, posting code would be a good idea (css and html).