Footer above bottom of page, instead of being at the bottom of the page content

Question

I am trying to make the footer stay at the bottom of the page, NOT the bottom of the screen (fixed) but at the bottom of the entire page, so you can only see it after scrolling to bottom. However, for some reason it stays above the bottom, and I can't seem to find the reason... FIDDLE: https://jsfiddle.net/okfudezn/

Image:

HTML (the div has no wrappers etc):

<div class="footer">
        <a>REGISTERED NAMES AND TRADEMARKS ARE THE PROPERTY OF THEIR RESPECTIVE OWNERS - Copyright © 2017 All rights reserved</a>
    </div>

CSS:

.footer {
    background-color: #4b4c46;
    height: 55px;
    line-height: 55px;
    width: 100%;
    text-align: center;
    color: #e1dac5;
    font-size: 14px;
}

Posible duplicated: http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height — Troyer, Jan 11 '17 at 13:42
Possible duplicate of [Sticky footer with sticky header?](http://stackoverflow.com/questions/14324402/sticky-footer-with-sticky-header) — localhost, Jan 11 '17 at 14:03

score 1 · Accepted Answer · answered Jan 11 '17 at 13:58

1

Just change replace you content div height to auto updated fiddle

.content {
    position: relative;
    width: 650px;
    height: auto;
    background-color: #e6e6e6;
    border: 1px solid #bcbcbc;
    margin: 0 auto;
    margin-bottom: 80px;
    top: -100px;
}

answered Jan 11 '17 at 13:58

Super User

9,448
3
31
47

But how can I make the div smaller now?.... since it sticks out like hell at the bottom – Krystian Borysewicz Jan 11 '17 at 14:02
You have used `top: -100` & `margin-bottom: 80px;` in content css, just remove it – Super User Jan 11 '17 at 14:02
You can also remove height from grid class – Super User Jan 11 '17 at 15:26

score 0 · Answer 2 · answered Jan 11 '17 at 13:45

0

I would try with:

.footer {
    position: absolute;
    bottom: 0;
}

answered Jan 11 '17 at 13:45

marko_b123

300
2
14

That puts it at the screen bottom, not the page bottom you know? – Krystian Borysewicz Jan 11 '17 at 13:47

DomeTune · Answer 3 · 2017-01-11T14:00:34.450

Here you go!

html, body {
 margin:0;
 padding:0;
  height: 100%;
}

#container {
  position: relative;
  height: auto;
  min-height: calc(100% - 54px);
  padding-top: 54px; /* Header & Footer */
}

#header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 54px;
  background: red;
}

#content {
  background: orange;
  height: 100%;
}

#footer {
  position: absolut;
  bottom: 0;
  width: 100%;
  height: 54px;
  background: yellow;
}

.simulateContent {
  height: 1000px;
}

<div id="container">
  <div id="header">
    HEADER
  </div>
  <div id="content">
    CONTENT START
    <div class="simulateContent"></div>
    CONTENT END
  </div>
  <div id="footer">
    FOOTER
  </div>
</div>

Man I clearly said I don't need the fixed screen position but the footer to stay at THE BOTTOM OF THE PAGE... :| — Krystian Borysewicz, Jan 11 '17 at 13:59

score 0 · Answer 4 · answered Jan 11 '17 at 13:58

Change this css

.content {
    background-color: #e6e6e6;
    border: 1px solid #bcbcbc;
    /*height: 650px;*/ /*Remove this*/
    margin: 0 auto 30px;/*Change this*/
    overflow: hidden;/*Add this*/
    position: relative;
    /*top: -100px;*//*Remove this*/
    width: 650px;
}
.grid {
    width: 600px;
    /*height: 1000px;*/ /*Remove this*/
    margin: 0 auto;
    padding-top: 30px;
}

https://jsfiddle.net/okfudezn/

Footer above bottom of page, instead of being at the bottom of the page content

4 Answers4