0

How do I make a footer (footer-tag) stick to the bottom of the screen, but not be sticky to the screen? If I'm on a 1080p monitor, the website has no scroll. When I try on 1366x768 the website becomes scrollable. I want the footer to be 100px below the content, because right now the footer is on top of the content. Here's my HTML structure:

<body>
    <div id="container">
        <div id="header"></div>
        <div id="body"></div>
        <footer></footer>
    </div>
</body>

So I have a header, body, and footer inside a container. All the guides/tutorials I've seen, makes the footer stick to the screen. If it doesn't stick to the screen, it won't stick to the bottom. Whenever I open the Chrome Developer Tools bar/menu, the footer shoots back up, which I guess is because my body's height is 100%? But I'm not sure. Help appreciated! Thanks.

MortenMoulder
  • 6,138
  • 11
  • 60
  • 116
  • possible duplicate of [Make footer stick to bottom of page correctly](http://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-page-correctly) – jbutler483 Jan 07 '15 at 11:36
  • possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) –  Jan 07 '15 at 13:03

3 Answers3

1

Quite easy: make html and body 100% height, your container (anything that has to be in the initial viewport) as well. Position the container relatively, the footer absolute, and put anything below.

Example on JSFiddle

Code

<style type="text/css">
    html, body { height: 100%; }

    #container { position: relative; 
        /* updated to support footer push */
        min-height: 100%;
        padding-bottom: 60px; /* must be the same as footer height */
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    #below { height: 500px; } /* or no height, or whatever */

    footer { position: absolute; bottom: 0; height: 60px; width: 100%; } /* as it's absolute, you should give it a specific height, or let it be as wide as its content */
</style>

<div id="container">
    <footer>F-F-F-F-F-FOOTER!</footer>
</div>
<div id="below"></div>

Edit see the edited code above; min-height instead of height for the container to let it be able to stretch, but at least be as high as the screen. You'll have to add a bottom padding too, as high as the footer, to prevent the footer from overlapping your content. And also add box-sizing: border-box, otherwise the padding will add up to the height, resulting in the footer to be pushed down the initial viewport.

(For history's sake, here is the original fiddle)

giorgio
  • 10,111
  • 2
  • 28
  • 41
  • whats the 'blue' section for? – jbutler483 Jan 07 '15 at 11:35
  • If I understood it correctly, you want the footer to be on the bottom of the screen when the page is loading, but it should scroll up with the rest of the page. Correct? The blue section is to demonstrate any content that is off-screen and will show when scrolling – giorgio Jan 07 '15 at 11:37
  • @jbutler483 the code posted here is only the minimal required code. Visual example is on jsFiddle. So if you want to put the code in a code snippet example block (or whatever it's called...), you should put the full example there. +1 for the effort though. – giorgio Jan 07 '15 at 11:45
  • Alright I get this yeah. I added some content to the page, but then look at it here: http://quirktools.com/screenfly/#u=http%3A//fiddle.jshell.net/rws21b21/3/show/&w=1024&h=600&a=1 – MortenMoulder Jan 07 '15 at 11:54
  • You have basically two options: push down the footer whenever more content is added (so the footer will be below the viewport), or make the inner box scroll. For the last one you need some extra code, and you'll end up with an extra scroll bar. Check it out **[here](http://jsfiddle.net/rws21b21/4/)** (you can make it look a lot nicer with some proper styling, but that's up to you ;)) – giorgio Jan 07 '15 at 12:01
  • I want to push down the footer when more content is added, or when the resolution is low. The footer has to be at bottom: 0 at all times. Then add some padding so the footer will be 100 pixels below the content. If the screen resolution is so low when you add the footer and padding, make it scrollable. – MortenMoulder Jan 07 '15 at 12:04
  • aight, checkout edited code and edited example. This should be what you want; footer at the bottom of the screen (if content is so little as to not overflow the screen), otherwise it'll be pushed down. – giorgio Jan 07 '15 at 12:11
  • 1
    Thanks! The box-sizing did the job! Thank you very much, giorgio! – MortenMoulder Jan 07 '15 at 12:18
0
footer { position : absolute; bottom : 0px; }

position : fixed ( When you want to stick any html element on screen and that will not move during scrolling )

position : absolute ( When it will show, it will be on the position that you specified, but later screen size and scrolling can change it's position )

Thanks ( Sorry for weak english )

:)

Tiger
  • 404
  • 1
  • 4
  • 13
0

you could add some padding to the bottom of your page, and then use vh measurements:

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
#header{
height:10vh;
}
#container {
  background: red;
  position:relative;
}
#body {
  height: 70vh;
  background: gray;
  padding-bottom:20vh;
}
footer {
  position: absolute;
  bottom: 0;
  height: 20vh;
  width: 100%;
  background: blue;
}
<body>
  <div id="container">
    <div id="header">header</div>
    <div id="body">body</div>
    <footer>footer</footer>
  </div>
</body>
jbutler483
  • 24,074
  • 9
  • 92
  • 145
  • You have to scroll to see the footer. – MortenMoulder Jan 07 '15 at 11:51
  • try that instead @Snorlax – jbutler483 Jan 07 '15 at 11:53
  • Is it recommended to give the header, body, and footer seperat sizes in percentage instead of pixels? I don't think so. – MortenMoulder Jan 07 '15 at 11:58
  • @Snorlax: I was using vh measurements. Also, that was more for demonstration purposes. If you wanted a responsive layout, then yes, you would (esp. with the use of min- and max- height/width values, yes it is.) – jbutler483 Jan 07 '15 at 12:00
  • Well sure, but what happens on a low resolution monitor? Then the content won't fit, because we're working in percentages instead of pixels. – MortenMoulder Jan 07 '15 at 12:01
  • That (i believed) would be beyond the scope of this question. However, I have edited the comment to suggest the use of "min-height" and/or "max-height" (in order to achieve this functionality). – jbutler483 Jan 07 '15 at 12:03