Here is my HTML structure.
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.