All geek questions in one place

Browser footer except when I scroll

I have a strange footer problem.

http://jsfiddle.net/YGAvd/

The clouds at the bottom of the page will attach to the bottom of the browser window if I expand or reduce the window. BUT, when I scroll down, the footer ends in the middle of the page. This is not a problem on any of my other pages, because they all fit into the 900x600 window until the scrollbar appears.

Is there a way to keep the footer at the bottom of the window, even when I scroll (it will always be there in the content) without messing up the code for all other pages that use the CSS document?

+4
source share
2 answers

In the CSS footer, the rule is to change 'position: absolute;' to "position: fixed";

You will also have to play with several other def, but it works.

check him

Here is my final footer rule

footer { position: fixed; color: black; width: 100%; height: 4.6em; background-image: url(http://img.photobucket.com/albums/v410/justice4all_quiet/bottom_clouds.jpg); background-repeat: repeat-x; background-color: e0e0e0; z-index: -999; overflow: hidden; bottom: 0px; }
+5
source

Do not put the background image in the footer ... make it the background image of the body!

Then make your body tag like this:

 body { line-height: 1; overflow: auto; background-image: url(http://img.photobucket.com/albums/v410/justice4all_quiet/bottom_clouds.jpg); background-repeat: repeat-x; background-position:bottom center; background-attachment:fixed; background-color: #b1ceff; font: normal 95% Sathu, Verdana, Arial, Tahoma; text-align: center; height: 100%; }

Remember to remove the code from the footer for the image. ALSO remove the background color in the footer to avoid any problems.

+1
source

Source: https://habr.com/ru/post/1402754/

More articles:


All Articles