CODEWITHSUNDEEP
cssfooter
Vlad Balanescu
Vlad Balanescu

Reputation: 674

CSS Stick Footer to Bottom

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?

Upvotes: 0

Views: 155

Answers (4)

Vlad Balanescu
Vlad Balanescu

Reputation: 674

[SOLVED]

I found this to be working for my example:

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

Upvotes: 0

Aksana Tolstoguzova
Aksana Tolstoguzova

Reputation: 369

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>

Upvotes: 1

purii
purii

Reputation: 6424

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>

Upvotes: 0

Sarower Jahan
Sarower Jahan

Reputation: 1495

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.

Upvotes: 0

Related Questions