RGO RGO - 4 months ago 11
CSS Question

Bootstrap Web Template: How to stick the footer element to the bottom of the page?

What I want seems to be simple but I cannot achieve it! :(

I am trying to modify and use the Web template example given here. However, there are a few problems:

First, I want the footer to be at bottom of the page at all times. In the given example, the footer looks like a footer at the bottom of the page because it's only using a fraction of the browser. However, if you run the code as an independent page, you see it is not stuck to the bottom.

Second, I also don't like the below line. I don't want to specify a height.

.row.content {height: 450px}


How I can achieve both at the same time?

Answer

This question has been asked many times but here's the code anyways:

footer {
  bottom: 0;
  position: fixed;
  width: 100%;
}
.row.content {
  position: fixed;
  height: 100%;
}
Comments