CODEWITHSUNDEEP
htmlcss
MortenMoulder
MortenMoulder

Reputation: 6656

Make footer sticky to bottom but not screen?

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.

Upvotes: 0

Views: 5290

Answers (3)

giorgio
giorgio

Reputation: 10212

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)

Upvotes: 1

jbutler483
jbutler483

Reputation: 24559

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>

Upvotes: 0

Tiger
Tiger

Reputation: 424

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 )

:)

Upvotes: 0

Related Questions