Making a CSS Footer Either Sit at the Bottom of the Browser Window or Bottom of Content

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> with class="wrapper" for your content.
Right before the closing </div> of the wrapper place the
<div class="push"></div>.
Right after the closing </div> of the wrapper 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 */
}

Footer at bottom of page or content, whichever is lower

Ryan Fait's sticky footer is very nice, however I find its basic structure to be lacking*.

Flexbox Version

If you're fortunate enough that you can use flexbox without needing to support older browsers, sticky footers become trivially easy, and support a dynamically sized footer.

The trick to getting footers to stick to the bottom with flexbox is to have other elements in the same container flex vertically. All it takes is a full-height wrapper element with display: flex and at least one sibling with a flex value greater than 0:

_CSS:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

html,body {  height: 100%;  margin: 0;  padding: 0;}#main-wrapper {  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-orient: vertical;  -webkit-box-direction: normal;      -ms-flex-direction: column;          flex-direction: column;  min-height: 100%;}article {  -webkit-box-flex: 1;      -ms-flex: 1;          flex: 1;}header {  background-color: #F00;}nav {  background-color: #FF0;}article {  background-color: #0F0;}footer {  background-color: #00F;}

<div id="main-wrapper">   <header>     here be header   </header>   <nav>   </nav>   <article>     here be content   </article>   <footer>     here be footer   </footer></div>

How can I get my footer to sit at the bottom of the page or the window?

Move your footer component out of body-container and apply the following style:

index.html

  <body>
    <div id="body-container">
        <app-header></app-header>
        <router-outlet></router-outlet>        
    </div>

    <app-footer></app-footer>

  </body>

Your css file

  html, body {
    height: 100%;
    margin: 0;
  }
  #body-container {
    min-height: 100%;
  
    /* Equal to height of footer */
    /* But also accounting for potential margin-bottom of last child */
    margin-bottom: -50px;
  }
  #footer {
    height: 50px;
  }

Tips: It's a good practice use the footer tag to footer of the page, header tag to header the page. Like this:

<header>The header page </header>
<main>Your content</main>
<footer>The footer page </footer>

force footer on bottom on pages with little content

Update 2021 - CSS GRID

Here is a solution using CSS Grid, this is by far the best way to do it on 2021.

html, body {
    margin: 0;
    height: 100%;
}
body {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-areas: "main" "footer";
    grid-template-rows: 1fr 80px;
}
main {
    background-color: #F8BBD0;
    grid-area: main;
}
footer {
    background-color: #7E57C2;
    grid-area: footer;
}

<body>
    <main>The content</main>
    <footer>Footer</footer>
</body>

Make div stay at bottom of page's content all the time even when there are scrollbars

This is precisely what position: fixed was designed for:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Here's the fiddle: http://jsfiddle.net/uw8f9/