Footer won't stay in the bottom of the page
Question
I'm am having some trouble, trying to get my footer to stay at the bottom of my page and the only tutorials I can find has a fixed position, which I dont want it to. I just want the footer to stay at the bottom of the page, so if the copyright line is at 1000px down on the page, that is where the footer will be. Right now it is at the top of the page, right under the header which it isn't supposed to.
My code (html):
<body>
<div id="footer">
<div class="CopyrightLine">
© Copyright
</div>
</div>
</body>
My code (css):
#footer{
width: 100%;
height: 200px;
background-color: #000000;
float: left;
bottom: 0;
}
EDIT:
I have now changed the code to look like this.
#footer{
width: 100%;
height: 200px;
background-color: #000000;
bottom: 0;
position: absolute;
}
.CopyrightLine{
position: relative;
left: 50%;
margin-left: -70px; /*half the image width*/
color: #ffffff;
}
But it still wont work, even though I make alot of text on top, to try and make it move.
4 answers
solution1
4 2015-03-07 22:12:27
You could use absolute position on the footer with some tricks as follows.
http://jsfiddle.net/a5q2u4bv/1/
html { position: relative; min-height: 100%; } body { margin: 0 0 150px; } footer { background: silver; position: absolute; left: 0; bottom: 0; width: 100%; height: 150px; }
<body> <main>main</main> <footer>footer</footer> </body>
solution2
1 2015-03-07 22:16:17
1: Why do you have it floated? float: left can be easily removed if it doesn't have any purpose. Floating could also cause problems with positioning, and be the reason that it doesn't work.
2: The bottom property only works when the element is something other than position: static . If it's not specified, it's position: static by default. position: absolute is probably what you want.
3: Does your site have a vertical scrollbar yet (so much content so that you could scroll it)? If you add more content to the site so that there becomes a scrollbar on the site and your footer code is the farthest down in the HTML, it will probably be at the bottom without specifying anything more. Demo: http://fiddle.jshell.net/j1hhc98v/2/
solution3
1 ACCPTED 2015-03-08 01:47:31
Never mind, I fixed it my self, I will leave the code here if anyone has the same problem.
html part:
<body>
<div id="header">
</div>
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
css part:
body {
padding:0;
height:100%;
}
body > #container {
height: auto;
min-height: 100%;
}
html {
height:100%;
}
#footer{
width: 100%;
height: 200px;
background-color: #000000;
z-index: 10;
margin-top: 1000px;
position: relative;
clear: both;
}
#content{
padding-bottom: 200px;
}
#container{
height:100%;
}
#header {
width: 100%;
height: 200px;
background-color: #000000;
float: left;
position: relative;
}
solution4
0 2015-03-08 01:23:09
Check out this sticky footer site. This is probably what you are looking for.
This is the first one I saw and still use. http://ryanfait.com/sticky-footer/
However CSS tricks has a good one too. Very similar but uses the pseudo :after instead of a div. https://css-tricks.com/snippets/css/sticky-footer/
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.