How to make a footer fixed at bottom?

Question

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>

https://css-tricks.com/snippets/css/sticky-footer/ – athi Jun 20 '17 at 07:04 — athi, Jun 20 '17 at 07:04

score 3 · Accepted Answer · answered Jun 20 '17 at 06:59

3

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

answered Jun 20 '17 at 06:59

1

this makes the height of your footer dynamic, might not be what you whant, also might turn out to be lower then your footer content height.... – Victor Radu Jun 20 '17 at 07:13
It's still a solution, he didn't specify those points. And about the footer content, you can adapt it to it. You also have media queries to handle specific cases. – Jun 20 '17 at 07:15

score 0 · Answer 2 · answered Jun 20 '17 at 07:02

0

@Nivitha G Please find following code.I hope you are expecting the same.

footer {
  background: #2db34a;
  bottom: 0;
  left: 0;
  padding: 20px 0;
  position: fixed;
  right: 0;
  text-align: center;
}

<footer>Fixed Footer</footer>

answered Jun 20 '17 at 07:02

sanjay

226
2
12

1

This isn't much use. It appears *over the top* of any content. – freedomn-m Jun 20 '17 at 07:08
@ freedomn-m Agree with you. Can you please tell me how can we do it in a better way? – sanjay Jun 20 '17 at 07:14
there's already a number of duplicates in SO – freedomn-m Jun 20 '17 at 07:16
Which one do you prefer among them? – sanjay Jun 20 '17 at 07:19

score 0 · Answer 3 · edited Jun 20 '17 at 07:34

0

You can use a site-footer class to create a sticky footer:

<div class="page-wrap">  
  Content!      
</div>
<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

edited Jun 20 '17 at 07:34

John Moutafis

22,254
11
68
112

answered Jun 20 '17 at 07:06

kavita

21
1

score 0 · Answer 4 · answered Jun 20 '17 at 07:11

if you whant your footer to scroll below the fold as well but never be higher then the bottom of the window you can do something like this:

<div id="content"></div>
<footer></footer>

and then

html{
  height:100%;
}
body{
  min-height:100%;
  margin:0;
  position:relative;
}

footer{
  background: #ccc;
  height:30px;
  position: absolute;
  bottom:0;
  width:100%
}

#content{
  padding-bottom:30px;
}

https://jsfiddle.net/ay6jx9yp/

score 0 · Answer 5 · answered Jun 20 '17 at 07:13

0

   Will you please try by making this.

html, body {
    height: 100%;
}

Here is one of the answered link similar to your problem:

answered Jun 20 '17 at 07:13

Suresh Sapkota

149
3
7

How to make a footer fixed at bottom?

5 Answers5