How can i make my footer stick to bottom? - html

Question

How can i make my footer stick to the bottom of the page with almost no content?
<footer>
<hr>
<p> © 2017 Sindre Berge <p>
</footer>

Answer 1

in CSS:
footer{
position:fixed;
bottom:0;
text-align: center;
width: 100%;
}
or you could inline it:
<footer style="position:fixed; bottom:0; text-align: center; width: 100%;">
<hr>
<p> © 2017 Sindre Berge <p>
</footer>

Answer 2

Using CSS:
<style>
footer {
width:100%;
position: fixed;
bottom: 0px;
text-align: center; /* This line is not needed but centers your text */
}
</style>
<footer>
<hr>
<p> © 2017 Sindre Berge <p>
</footer>
See it in action and play with it here: https://www.w3schools.com/code/tryit.asp?filename=FEO78PICTTQP
Or try the flex solution proposed by Sam. This will not cause the footer to not always be at the bottom of the browser view but instead at the bottom of the page.
Flex solution:
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: start;
-moz-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
/*I give height 700px but can be adapted to a body being 100%*/
height:700px;
background:#cccccc;
}
.flex-content {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 1 100%;
-ms-flex: 0 1 100%;
flex: 0 1 100%;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
background:#ca33aa;
height:100px;
}
<div class="flex-container">
<div class="flex-content">
This is my footer
</div>
</div>

Answer 3

I personally like to use
footer{
position:absolute;
bottom:0;
width: 99%;
}
as I've found that sometimes the site will go haywire -- especially as far as the width is concerned, as by itself I am sometimes greeted by a nasty horizontal scroll bar at the bottom, despite everything fitting onto the screen nicely.

Answer 4

Block solution:
footer {
display:block;
position:fixed;
bottom:0;
}
Flex solution:
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: start;
-moz-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
/*I give height 700px but can be adapted to a body being 100%*/
height:700px;
background:#cccccc;
}
.flex-content {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 1 100%;
-ms-flex: 0 1 100%;
flex: 0 1 100%;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
background:#ca33aa;
height:100px;
}
<div class="flex-container">
<div class="flex-content">
This is my footer
</div>
</div>