Kevin Aartsen Kevin Aartsen - 1 month ago 18
CSS Question

Footer position

I have a footer which i always want to be at the bottom like this:

enter image description here

It must be at the bottom at all time.. I thought the correct way to do this was with css:

#generated_footer_date {
color:#ffffff;
width:100%;
background-color:rgba(0, 0, 0, 0.6);
text-align:center;
padding-top:15px;
height:50px;
font-family: 'Raleway', sans-serif;
position:absolute;
right: 0;
bottom: 0;
left: 0;
margin-top:100px;
}


But now when i click on generate it displays data on the page which makes the page longer and enter image description here

When i click on generate the page becomes longer but the footer stays in its own place and looks like that. I thought i could solve this issue with jquery. If i click the button i could change the position of the footer from absolute to relative and then it would work, but can i do this with css?

Answer

Just try:

footer{
  position: fixed;
  bottom: 0
}