Footer doesn't stay on the bottom of the page
Question
I have a web page on which I use the "Supersized" jquery plugin for changing backgrounds. I also have a footer which only shows if I put the following CSS for it:
#footer{
width: 100%;
color: #ffffff;
background: #000000;
position: fixed;
bottom: 0px;
height: 40px;
padding: 5px 0px 5px 0px;
}
However, when something happens which changes the window height, the content of the page goes behind the footer, and when I scroll down, the footer doesn't stay at the bottom of the page - it scrolls up.
For example, I have three divs which are shown side-by-side, but when the window resizes under 900px of width, the divs are shown one under the other, and so the window height changes. That's when the divs go behind the footer, and it scrolls up along with them.
I have tried position: relative and position: static , but then it doesn't even show, even with high values of z-index. I think this "not-showing" is because of the plugin I use for background images. I have also tried some jquery functions when window changes height, but no results there either. Any ideas? Thank you in advance...
2 answers
solution1
3 2017-01-02 16:31:31
Here is example:
html { height: 100%; } body { position: relative; min-height: 100%; } main { padding-bottom: 30px; } footer { position: absolute; bottom: 0; width: 100%; height: 30px; }
<body> <header> header </header> <main> main </main> <footer> footer </footer> </body>
solution2
1 2014-02-09 22:25:49
If your goal is keep your footer at the bottom of your "page content" AND visible, then I would advise you to assign height:100% your html tag and your body tag in your CSS. On the other hand if you want the footer to stay at the bottom of the "Browser Window/Viewport" then you will want to look up the "Making a footer stay put with CSS" by "JONATHAN LONGNECKER" . Hope I have helped! Athena
@athenacreations.org
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.