CSS Stick Footer to Bottom

Question

Here is my code to stick the footer to bottom of the page:

#footer {
background-color: #0F2157;
width: 100%;
bottom: 0px;
min-height: 35px;
padding-top: 5px;
}

When I'm doing it with height it works perfectly fine, but when I'm trying to set the minimum height it leaves a little space under the footer. Any guess how to fix that?

You don't have position on this anywhere - are you using `position: fixed;`? — random_user_name, Dec 17 '15 at 23:12
Do you mean you want to it showing at the bottom at all times? You could just use `position: fixed;` like @cale_b said. But if you want it at absolute bottom, I recently wrote a blog post about that here: http://samwebb.me/articles/locking-the-footer-to-absolute-bottom — Sam, Dec 17 '15 at 23:17
Also, might be a duplicate of: http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height?rq=1 — Sam, Dec 17 '15 at 23:21
No, I don't want it fixed all the times. That's a different question. I want it sticked to the bottom only, but it shouldn't depended on dimension of the page. Always 0px bottom. Position: absolute — Vlad Balanescu, Dec 17 '15 at 23:28

Aksana Tolstoguzova · Answer 1 · 2016-08-20T19:43:19.463

First of all, the height of body, html and container (see element with class 'container') has to have height: 100%; In this solution I have used flex box. It is supported by all modern browsers and IE11. It's necessary to add the following properties to container:

display: flex;
flex-direction: column; /*the flex items are placed in column, by default it is in row*/

To move footer to bottom, just add to flex item

margin-top: auto; /* it grabs all free space between flex items and put it before this flex item */

html, body {
  height: 100%;
}

.container {
  height: 100%;
  background-color: green;
  display: flex;
  flex-direction: column;
}

.header {
  height: 20%;
  background-color: yellow;
}

.content {
  background-color: white;
}

.footer {
  min-height: 20%;
  background-color: blue;
  margin-top: auto;
}

  <div class="container">
    <div class="header">Header</div>
    <div class="content">It's content</div>
    <div class="footer">Footer in bottom</div>
  </div>

score 0 · Answer 2 · answered Dec 17 '15 at 23:53

0

You used min height 35 px. I think your content's height inside of footer is more than 35px. So check the margin or padding of all footer elements.

It will be better, if you can make a jsfiddle demo.

answered Dec 17 '15 at 23:53

Sarower Jahan

1,445
1
13
20

score 0 · Accepted Answer · answered Dec 18 '15 at 00:23

What about using Flexbox? It is supported by IE>=10.

To use that, you have to split your page at least in two separated elements: The "upper"-one (.content) with the whole content of your page and the footer.

The "upper"-one gets the value flex: 1, which is a shorthand for:

flex-grow: 1
flex-shrink: 1
flex-basis: auto

This means, that the "upper"-element could grow to the maximum, while the footer reserves only it's actually required space.

Code snippet

html {
  height: 100%;
}
body {
  min-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

<!doctype html>
<html>

<head>
</head>

<body>
  <div class="content"></div>
  <footer class="footer">
    Hey footer!
  </footer>
</body>

</html>

Thank you. This answered my question @purii – Vlad Balanescu Oct 16 '16 at 10:35 — Vlad Balanescu, Oct 16 '16 at 10:35

score 0 · Answer 4 · answered Nov 03 '16 at 22:11

0

[SOLVED]

I found this to be working for my example:

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

answered Nov 03 '16 at 22:11

Vlad Balanescu

664
5
27

CSS Stick Footer to Bottom

4 Answers4

Code snippet