Force Footer on Bottom on Pages with Little Content

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>

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 force footer on bottom of page on empty/full page with grid layout

I got around with a solution which might help someone else in the future:

Inside the .container class I added:

.container {
[…]
/* this forces the footer to stay at the bottom even if the content doesn't fill up the page */
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

where grid-template-rows equals the amount of rows of the grid layout.

I edited the CSS-file to remove padding around the whole grid-layout which made the page a tiny bit bigger than 100vh and added a scrollbar this way.

Instead I added a margin to the header and footer itself:

footer on low-content pages
footer with more content

On mobile you may need to scroll to see the content due to the URL bar:

landing on mobile startpage
scroll on mobile to see 100vh

I mark this question as solved as this solution does exactly what I want; still, if someone knows a better way, please write an answer!

Force footer to the bottom of the page if no content is available

As you have not posted code (HTML or CSS) I am just guessing :

#wrapper{
    min-height:100%;
    position:relative;
}
footer {
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    background:red;
    height:100px;
}

Demonstration: footer with content

Demonstration: footer without content

How to Stick Footer to Bottom of the site when Page Content is Less?

Structure your basic HTML-Markup like this:

<body>
  <header></header>
  <div id="wrap"></div>
  <footer></footer>
</body>

Then in your css add

#wrap {
  min-height: 100%;
}

Super simple and works across all browsers. Add all your other markup inside the #wrap. If it helps you can also put the header inside the wrap. Just make sure wrap is before the footer.

force footer to bottom of page for short pages in my wordpress

Come on dude, you were so close!

Make sure you follow the same structure:

<body>
    <div id="wrap">
      <div id="header">fdsf</div>
        <div id="nav">ffd</div>
        <div id="inner">
          content here...
        </div>
        <div class="push"></div>            
    </div>
    <div id="footer" class="footer">footer</div>
</body>

Then from ryan fait's

#wrap {
min-height: 100%;
  height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
  height: 100%;
  margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}

.footer, .push {
  height: 155px; /* .push must be the same height as .footer */
}

#footer {
  background: #161616;
  color: #666666;
  margin: 0 auto 0;
  padding: 20px, 0, 0, 0;
  clear: both; 
  overflow: hidden;
  border-top: 1px solid #222222;
  width: 100%;
}

Example:
http://codepen.io/EightArmsHQ/pen/YPymWV

I'd really advise having a muck about with my code in Codepen, just to get to grips with it. I sticky footer every footer I've ever made, and it still gets the better of me some times so just keep at it. There will also always be occasions when the above doesn't quite work...

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 */
}

Force Footer on Bottom on Pages with Little Content