How to stick a footer to bottom in css?

CssSticky Footer

Css Problem Overview

I am having the classic problem for the positioning of a Footer on the bottom of the browser. I've tried methods including but to no good result: my footer always keeps appearing in the middle of the browser window in both FF and IE.

In the HTML i got this simple structure

 <div class=Main />
 <div id=Footer />

Here is the css code that is relevant for the css footer problem:

    	margin: 0;

html, body
	height: 100%;
    	background-color: #004669;
    	font-family: Tahoma, Arial;
    	font-size: 0.7em;
    	color: White;
    	position: relative;
    	height: 4em;
    	height:auto !important;
    	/*top: 50px;*/
    	margin: 0 25% -4em 25%;
    	font-family: Verdana, Arial, Tahoma, Times New Roman;
    	font-size: 0.8em;
    	word-spacing: 1px;
    	line-height: 170%;
    	/*padding-bottom: 40px;*/

Where am I doing wrong? I really have tried everything. If I missed any useful info please let me know.

Thank you for any suggestion in advance.


thank you all for your answers. it worked with:


setting position:fixed did not work in IE for some reason(Still showed footer in the middle of the browser), only worked for FF.

Css Solutions

Solution 1 - Css

Try setting the styles of your footer to position:absolute; and bottom:0;.

Solution 2 - Css

#Footer {

That will make the footer stay at the bottom of the browser window no matter where you scroll.

Solution 3 - Css

#Footer {

worked for me

Solution 4 - Css

I think a lot of folks are looking for a footer on the bottom that scrolls instead of being fixed, called a sticky footer. Fixed footers will cover body content when the height is too short. You have to set the html, body, and page container to a height of 100%, set your footer to absolute position bottom. Your page content container needs a relative position for this to work. Your footer has a negative margin equal to height of footer minus bottom margin of page content. See the example page I posted.

Example with notes:

Solution 5 - Css

position: fixed; 
bottom: 0;

Solution 6 - Css

Assuming you know the size of your footer, you can do this:

    footer {
        position: sticky;
        height: 100px;
        top: calc( 100vh - 100px );

Solution 7 - Css

For modern browser, you can use flex layout to ensure the footer stays at the bottom no matter the content length (and the bottom won't hide the content if it is too long)

HTML Layout:

<div class="layout-wrapper">
  <header>My header</header>
  <section class="page-content">My Main page content</section>
  <footer>My footer</footer>


html, body {
  min-height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;

.layout-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

.layout-wrapper > .page-content {
  background: cornflowerblue;
  color: white;
  padding: 20px;

.layout-wrapper > header, .layout-wrapper > footer {
  background: #C0C0C0;
  padding: 20px 0;


Solution 8 - Css

So a Mixed Solution from @nvdo and @Abdelhameed Mahmoud worked for me

footer {
    position: sticky;
    height: 100px;
    top: calc( 100vh - 100px );

Solution 9 - Css

If you use the "position:fixed; bottom:0;" your footer will always show at the bottom and will hide your content if the page is longer than the browser window.

Solution 10 - Css

This worked for me:

  width: 100%;
  bottom: 0;
  clear: both;

Solution 11 - Css

The following css property will do it

position: fixed;

I hope this help.

Solution 12 - Css

Try position attribute with fixed value to put your division in a fixed position. Following is the code for putting your footer at bottom of the page.

footer {
    position: fixed; 
    bottom: 0;

Solution 13 - Css

I agree with Luke Vo's solution. I thought it would better to omit justify-content: space-between; from layout-wrapper and add margin-top: auto; to footer.

You wouldn't want your body to be hanging in the middle and only have footer pushed to the bottom.

This approach addresses any content extending beyond the viewport.

Solution 14 - Css

The following code works, which is from

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;

<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>

<div class="footer">


Solution 15 - Css

I had a similar issue with this sticky footer tutorial. If memory serves, you need to put your form tags within your <div class=Main /> section since the form tag itself causes issues with the lineup.


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAmc_rttyView Question on Stackoverflow
Solution 1 - CssNick LarsenView Answer on Stackoverflow
Solution 2 - CsscodedudeView Answer on Stackoverflow
Solution 3 - CssSheikh NaveedView Answer on Stackoverflow
Solution 4 - CssmbokilView Answer on Stackoverflow
Solution 5 - CssBhawna MalhotraView Answer on Stackoverflow
Solution 6 - CssndvoView Answer on Stackoverflow
Solution 7 - CssLuke VoView Answer on Stackoverflow
Solution 8 - CssMohammad AbraqView Answer on Stackoverflow
Solution 9 - CssChtioui MalekView Answer on Stackoverflow
Solution 10 - CssrzskhrView Answer on Stackoverflow
Solution 11 - CssAbdelhameed MahmoudView Answer on Stackoverflow
Solution 12 - CssCodemakerView Answer on Stackoverflow
Solution 13 - CssBenjamin TohView Answer on Stackoverflow
Solution 14 - CssSherman ChenView Answer on Stackoverflow
Solution 15 - CssDillie-OView Answer on Stackoverflow