Search code examples
javascriptjqueryhtmlcssfooter

How to make a footer fixed at bottom?

I am using footer in my project. I am using c#.net mvc.

I insert the footer. But I have problem in it.

When Body have low content means, the footer goes up. i.e. Below the body content. I want footer to be fixed at bottom of the page if body contains low content.

How can I achieve it?

.footer {
  background: none repeat scroll 0 0 white;
  border-top: 1px solid #e7eaec;
  bottom: 0;
  left: 0;
  padding: 10px 20px;
  position: absolute;
  right: 0;
}
<div class="footer">
  Bottom Page
</div>

Solution

  • You can use new properties and values from CSS3.

    For instance : 

    <body>
    <div class="container"></div>
    <div class="footer"></div>
</body>

    For the CSS : 

    .container {
    min-height: 90vh;
}

.footer {
    height: 10vh;
}

    This way, your footer will always be at the bottom, even if your container is null