making a div stick at the bottom on container div show/hide toggle?

Question

my main container div can be refreshed, so its content is being hide/shown. When my container div is hide, my footer shoots up.

the html structure looks like the following:

Note that i already tried this:

And it doesn't seem to work, the footer div will still shoot up when the container div is hidden.

Nor can i set a height on the container div because i want the content div height to stretch 100%.

Any ideas? Thanks in advance.

Answer 1

Use this css:

#yourdiv {
   position:fixed;
   bottom:0;
}

This will make it stick to the bottom :)

Answer 2

Sticky footer is excellent for keeping the footer where it should be.