Reputation: 6656
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
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.
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
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
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