Set footer on the bottom ,but not allways on bottom [duplicate] - html

Question

This question already has answers here:
Footer below content, but not floating mid-air if not enough content
(6 answers)
Closed 7 years ago.
I have to set the footer on the bottom but in the way I'm using it's always at the bottom even if the page content is bigger than the screen.
If the content its bigger than the screen I would like to have to scroll in order to see the footer.
.fijo{
bottom: 0;
position: fixed;
width:100%;
}

Answer 1

You need to use a sticky footer.
HTML
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
CSS
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}

Answer 2

Easy one, just use the following CSS code
#footer {
position: absolute;
bottom: 10;
left: 0;
}
The ID of the footer should of course be "footer" in order for this to work, or rename it to whatever you like.
Hope this helps :)

Answer 3

Here is the solution
Demo
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ffff00;
padding:20px;
text-align:center;
}
#content {
padding-bottom:50px; /* Height of the footer element */
text-align:center;
}
#footer {
background:#00ffff;
width:100%;
height:50px;
position:absolute;
bottom:0;
left:0;
text-align:center;
}
HTML:
<div id="wrapper">
<div id="header">Header is here</div>
<div id="content">Content is here</div>
<div id="footer">Footer is here</div>
</div>

Answer 4

If you are using HTML5 in combination with Twitter Bootstrap or any other template, or even pages built from scratch, you can also apply it directly on the footer element with no additional ID or class selectors required using the code #pzp provided above:
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}