python-coder python-coder - 4 months ago 5x
HTML Question

jQuery hide/show a div

Here is my HTML structure.

<div id="head"></div>
<div id="content"></div>
<div id="footer"></div>

Now when I hide the
div, using
, my footer block comes up. I want that my footer block should be remain fixed at the bottom, even if I hide it or show it.

How can I do it?


display: none and visibility: hidden are different.

If you choose display: none, the DIV will no longer occupying the space, thus the footer will come up.

Therefore, you should use (as per @putvande said in comment):


If you set visibility: hidden, the DIV will be hidden (invisible), but it still occupies the space, as its display CSS is still display: block by default.

To show the contents again, set:


Moreover, normally footer uses position: fixed and bottom: 0 to fix it to the bottom of the page, which will probably avoid the issue you encounter right now.