set the footer at page bottom

Question

This is a test code but I need to set the footer on the real bottom of the page

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="wrapper">
                <?php
                    for($i=0;$i<100;$i++){
                        echo $i."<br>";
                    }
                ?>
        </div>
        <footer>
            Footer<br>
        </footer>
    </body>
<html>

and the css file

html, body {
    height: 100%;
    background-color: grey;
}
.wrapper {
    min-height: 100%;
    margin-bottom: -20%;
    padding-bottom: -20%;
    background-color: green;
}
footer {
    background-color: blue;
    min-height: 20%;
    position: absolute;
    bottom: 0;
    width: 100%;
}

That way set the footer on the page bottom but if you scroll the page continues,I need to set the footer at the real end,when you cannot scroll anymore there is where the footer has to be placed.

score 0 · Answer 1 · answered Dec 30 '15 at 19:07

0

Try assigning to the footer element:

footer{
position: fixed;
bottom: 0;
}

answered Dec 30 '15 at 19:07

Dimentica

795
2
11
30

score 0 · Accepted Answer · answered Dec 30 '15 at 19:10

0

Like this... this sets it after all content which is what I think you mean

footer {
    background-color: blue;
    min-height: 20%;
    position: relative;
    width: 100%;
}

Have a look at this fiddle

answered Dec 30 '15 at 19:10

StudioTime

22,603
38
120
207

score 0 · Answer 3 · edited Dec 30 '15 at 19:25

0

You should remove the margin and padding for the body, there is a default margin and padding, you can remove this.

jsfiddle-link

html, body {
  height: 100%;
  background-color: grey;
  padding:0;
  margin:0;
}

edited Dec 30 '15 at 19:25

Igor Ivancha

3,413
4
30
39

answered Dec 30 '15 at 19:10

Jan-Wiebe

61
2
11

set the footer at page bottom

3 Answers3