Position footer at bottom of page having fixed header
As you have mentioned, position: fixed
would position the footer with the respect to the viewport rather than the page itself. Therefore, we have to keep the element in normal flow and somehow position it to the bottom of the page.
There are couple of approaches to achieve that, which have been discussed in the wild during the time.
For instance:
- A List Apart's article Exploring Footers - by Bobby Van Der Sluis, 2004
- footerStickAlt - by Craig Erskine, 2005
- Sticky Footer - by Shelly Cole, 2006
- How to keep footers at the bottom of the page - by Matthew James Taylor, 2007
- Make the Footer Stick to the Bottom of a Page - by Ryan Fait, 2007
- Refined version of Ryan Fait's Sticky Footer - by Chris Coyier, 2009
- Sticky CSS footers: The flexible way (which uses CSS Tables) - by Torben Haase, 2011
- Responsive Sticky Footer (refined version of Torben's approach) - by Joshua Cook, 2013
- Solved by Flexbox's Sticky Footer - by Philip Walton, 2013
Sticky Footer
In this answer I'd go with Ryan Fait's method since it is simple and easy to understand and also it meets your needs (Situations where both header and footer have fixed heights).
Considering the structure below:
<div id="content"> <!-- content goes here. It may (not) include the header --> </div>
<div id="footer">Footer</div>
The following steps are needed:
Setting
height
of the<html>
and<body>
elements to100%
which is required for the next step1.The most important thing we need to do is to make sure that the
#content
is high enough to push the#footer
down the page. Hence we give the#content
amin-height
of100%
.So far, the
#content
has taken100%
of height of the viewport, thus we should pull the footer up to position it at the bottom of the page. In order to do that we could give the#content
a negativemargin-bottom
equivalent to the footer'sheight
. Also to make sure that the footer appears on top of the content, we shouldposition
the footerrelative
ly. Demo Here.As can be seen, when the
#content
grows by its contents, some of the contents go behind the footer. We could avoid that either by appending a spacer element at the end of#content
or use the combination ofpadding-bottom
andbox-sizing: border-box
2 which is supposed to be supported on IE8 as well.
4.1 Adding a spacer
Example Here
<div id="content">
<!-- content goes here -->
<div class="spacer"></div>
</div>
<div id="footer">Footer</div>
.spacer, #footer { height: 100px; }
4.2 Combination of padding-bottom
and box-sizing
Updated Example
#content {
min-height: 100%;
margin-bottom: -100px; /* Equivalent to footer's height */
padding-bottom: 100px; /* Equivalent to footer's height */
box-sizing: border-box;
}
(Note that vendor prefixes omitted due to brevity)
Adding the Header
If the header should remain in normal flow, you could simply add it to the
#content
as follows:
(Example Here)<div id="content">
<div id="header">Header</div>
...But if it should be positioned absolutely3, we need to push the contents of
#content
element down in order to prevent overlapping.
Therefore, again, we could either add a spacer at the beginning of #content
(Example Here):
<div id="header">Header</div>
<div id="content">
<div class="header-spacer"></div>
<!-- content goes here -->
<div class="footer-spacer"></div>
</div>
<div id="footer">Footer</div>
Or use the combination of padding-top
and box-sizing
as follows:
<div id="header">Header</div>
<div id="content"> <!-- content goes here. --> </div>
<div id="footer">Footer</div>
#content {
min-height: 100%;
margin-bottom: -100px; /* Equivalent to footer's height */
padding-top : 50px; /* Equivalent to header's height */
padding-bottom: 100px; /* Equivalent to footer's height */
box-sizing: border-box;
}
Updated Example (Note that vendor prefixes omitted due to brevity)
At last but not least!
Nowadays, All major modern web browsers support box-sizing: border-box
declaration (including IE8). However if you're looking for the traditional way which has a wider browser support, stick with using spacer elements.
1. This is needed to make min-height: 100%
to work on the #content
element (because a percentage value is relative to the height
of the box's containing block which is established by the <body>
). Also <html>
should have an explicit height
to make height: 100%
to work on <body>
.
2. box-sizing: border-box
makes UAs calculate the width
/height
of the box including padding and borders.
3. According to spec, absolutely positioned elements are elements having a position
of absolute
or fixed
.
Fixed header needs to stay at top, fixed footer needs to stay at bottom, remaining amount of space fills main div with content
Different Header And Footer Styles
There are four different code snippets in this answer, each of which demonstrate different Header and Footer behavior as listed below:
- Sticky Header & Sticky Footer
- Sticky Header & Fixed Footer
- Fixed Header & Sticky Footer
- Fixed Header & Fixed Footer
You can click on the cards to delete them, so that you can see the behavior when there are less cards. You can also visualize this by toggling the window width.
Sticky Header & Sticky Footer
const nav = document.querySelector("nav");
const footer = document.querySelector("footer");
const container = document.querySelector(".card-container");
for (let i = 0; i < 20; i++) {
const card = document.createElement("div");
card.className = "card";
card.innerText = "Click Me!!";
container.appendChild(card);
}
const cards = document.querySelectorAll(".card");
cards.forEach((card) => {
card.addEventListener("click", () => {
card.style.display = "none";
});
});
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
color: whitesmoke;
font-family: cursive;
}
header {
position: fixed;
top: 0;
/*Expanding to take full width*/
right: 0;
left: 0;
}
footer {
position: fixed;
bottom: 0;
/*Expanding to take full width*/
right: 0;
left: 0;
}
header,
footer {
background: slateblue;
padding: 1em;
}
.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, 150px);
place-content: center;
gap: 10px;
padding: 5em 1em; /* Top Padding Is Required */
}
.card {
display: grid;
place-items: center;
width: 100%;
height: 100px;
background: coral;
border-radius: 5px;
cursor: pointer;
}
<header>Sticky Header & Sticky Footer</header>
<div class="card-container"></div>
<footer>Sticky Footer</footer>
Have a footer that sit on the bottom of the page with a fixed header
As default model is content-box adding a padding-top
to an element with height:100%;
will make its height 100% + 130px
.
So you have to add another <div>
wrapper with auto height and add it padding-top: 130px;
<html style="height:100%;">
<body style="height:100%; margin:0; position:relative;">
<div id="wrapper" style="min-height:100%;">
<div id="container" style="padding-top:130px; padding-bottom:130px;">
</div>
</div>
<div id="footer" style="position:absolute; bottom:0; height:130px;">
</div>
</body>
</html>
CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page
A simple method is to make the body 100%
of your page, with a min-height
of 100%
too. This works fine if the height of your footer does not change.
Give the footer a negative margin-top:
footer {
clear: both;
position: relative;
height: 200px;
margin-top: -200px;
}
How do you get the footer to stay at the bottom of a Web page?
To get a sticky footer:
Have a
<div>
withclass="wrapper"
for your content.Right before the closing
</div>
of thewrapper
place the<div class="push"></div>
.Right after the closing
</div>
of thewrapper
place the<div class="footer"></div>
.
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
Related Topics
Why Is Form Enctype=Multipart/Form-Data Required When Uploading a File
How to Use Div as a Direct Child of Ul
How to Encode/Decode HTML Entities in Ruby
Invert CSS Font-Color Depending on Background-Color
How to Make Html5 Video Fullscreen
Remove White Space Above and Below Large Text in an Inline-Block Element
Input/Button Elements Not Shrinking in a Flex Container
Heights Rendering Differently in Chrome and Firefox
How to Make a Vertical Line in Html
How to Get a Div to Float to the Bottom of Its Container
Drawing an Svg File on a Html5 Canvas
Make a Link Open a New Window (Not Tab)
What's the Difference If I Put CSS File Inside ≪Head≫ or ≪Body≫
Why Do Absolute Elements Stack Up on Each Other Instead of Stacking One After the Other