3

I want to see the footer of a page all the time. So I want it sticky. It should not depend on how many content is on the page. So I came up with position:fixed and bottom:0. Of course this works as it should but I don't want the footer on bottom of the browser but at the bottom of documents body.

with position:fixed & what I want footer is still visible

the black border is the browser-window

Demo (jsfiddle)

Is there a way to achieve this?

Werner
  • 2,126
  • 2
  • 22
  • 34
  • so you want it to be under the body, but pinned to the bottom if there is more content? – starvator Oct 16 '14 at 13:03
  • 1
    Try this (sticky footer) - http://jsfiddle.net/rkftqr0r/ and http://jsfiddle.net/c5artgp8/ – Anonymous Oct 16 '14 at 13:03
  • use jquery to alternate between two classes, depending on the relation of the footer to the `$(window).height()` – starvator Oct 16 '14 at 13:11
  • 1
    Yet another duplicate? http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page?lq=1 – Hashem Qolami Oct 16 '14 at 13:14
  • You can find a list of different approaches here: http://stackoverflow.com/questions/18469262/position-footer-at-bottom-of-page-having-fixed-header/18469622#18469622 – Hashem Qolami Oct 16 '14 at 13:16
  • @Hashem Qolami That's not what I want. I don't want it at the bottom of the page but at the bottom of body. I don't want to set the body to `height:100%` or something like this. – Werner Oct 16 '14 at 13:18
  • Define the `page`. You could set `min-height` to the `` itself and remove the `.wrapper` (in the posted link). – Hashem Qolami Oct 16 '14 at 13:20
  • I also want to point out that I don't know of a way to do this with CSS only because having it stick at the bottom of the viewport as you scroll needs to be calculated with jQuery or JavaScript. – Brian Oct 16 '14 at 13:26
  • @Hashem Qolami If I remove the wrapper from you posted link and add min-height to #content I would have this: http://jsfiddle.net/0d3vukLy/ – Werner Oct 16 '14 at 13:29
  • Here's an example doing what you want, but again, you need jQuery for it to work properly: http://jsfiddle.net/hLUK2/9/ – Brian Oct 16 '14 at 13:44

4 Answers4

6

Since browser-support for position:sticky is here, there is a simple solution for it:

.content {
  padding: 5pt;
  border: 1px dashed rgb(200, 0, 0);
}

.footer {
  padding: 5pt;
  background-color: rgba(0, 150, 0, .8);
  position: sticky;
  bottom: 0;
}
<div class="content">
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...<br/>
 Content...
</div>
<div class="footer">I'm the footer!</div>
Werner
  • 2,126
  • 2
  • 22
  • 34
0

Fixed position takes the item outside of the normal page flow. Change your footer position to relative and it'll stay at the bottom of your content div.

Fiddle

[role="footer"] {
    width:100%;
    padding:10px;
    position:relative;
    bottom:0; /* should be on bottom of #content */
    background-color:rgba(100,255,100,0.8);
    border:1px solid #0f0;
}
Brian
  • 4,274
  • 2
  • 27
  • 55
  • But then the footer will be hidden if the content (or the body) to too high – Werner Oct 16 '14 at 13:01
  • 1
    You didn't say anything about a sticky footer on scrolling. You should update your question to reflect that desired behavior because they're two different things. – Brian Oct 16 '14 at 13:02
0

what about specifying a max-height and then if the content exceeds it then have an auto scroll

#content {
    border:1px dashed #f00;
    overflow:auto;
    max-height:300px;
}

http://jsfiddle.net/nt1u0o1n/6/

That's Brians JFiddle I just added some CSS to show what I mean

you can try this one if you're going for a responsive layout

http://jsfiddle.net/nt1u0o1n/21/

That's still Brians JFiddle I just added some CSS to show what I mean, again

TheLovelySausage
  • 3,838
  • 15
  • 56
  • 106
  • It's a good idea, but if he's shooting for fluid layout (I'm assuming he is, which prompted the question) the footer falls below the viewport when you resize the browser. – Brian Oct 16 '14 at 13:30
  • that's true and then the only way to make it responsive would be to set the max-height as a percentage but I remember people having issues with that before – TheLovelySausage Oct 16 '14 at 13:33
  • I updated it to use percentage height although it will need some maths and a percentage height on the footer to get it to sit just right – TheLovelySausage Oct 16 '14 at 13:49
0

your footer position must be "relative" not "fixed" I think ... So your footer will appear just when
your body ends... Hope it works ...

Hamid Hosseini
  • 217
  • 4
  • 8