How to attach footer? - html

Question

I'm going to make "universal" footer to my example of web-site. But I have any problems:
1. When page is short - footer doesn't work
2. When page is long - footer work
Footer's CSS:
.footer {
text-align: center;
position: relative;
bottom: 0px;
margin-bottom: -50px;
margin-left: -50px;
margin-right: -50px;
width: 110%;
height: 70px;
background-color: #FF9100;
font-size: 20px;
}
Footer's HTML:
<div class="footer">
<p>©All rights reserved</p>
</div>
Examlpes of images:

Answer 1

Try this:
.footer {
text-align: center;
position: fixed;
bottom: 0px;
width: 100%;
height: 70px;
background-color: #FF9100;
font-size: 20px;
}

Answer 2

You can assign position:fixed plus a bottom:0 rules to the .footer section, to force it to stay at the bottom of the page.
You can see a very basic code example below
*{
box-sizing:border-box;
margin:0;
padding:0;
}
main{
background:url('http://lorempixel.com/1200/1200/nature');
background-size:cover;
background-position:center center;
color:#fff;
text-align:center;
height:100vh;
}
footer{
position:fixed;
bottom:0;
}
<main>
<h1>Example page</h1>
<footer>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur molestias quos, soluta. Ut dolorum officia illum molestias quia commodi tempora cupiditate, earum deleniti amet sequi deserunt tempore, perferendis harum doloremque.</p>
</footer>
</main>