Keep Footer with Variable Height on Bottom

Keep footer with variable height on bottom

2014 UPDATE: The modern way to solve this layout problem is to use the flexbox CSS model. It's supported by all major browsers and IE11+.

Here's a solution for sticky footer of flexible height using divs with display: table-row:

html, body {

  height: 100%;

  margin: 0;

}

.wrapper {

  display: table;

  height: 100%;

  width: 100%;

  background: yellow;

}

.content {

  display: table-row;

  /* height is dynamic, and will expand... */

  height: 100%;

  /* ...as content is added (won't scroll) */

  background: turquoise;

}

.footer {

  display: table-row;

  background: lightgray;

}

<div class="wrapper">

  <div class="content">

    <h2>Content</h2>

  </div>

  <div class="footer">

    <h3>Sticky footer</h3>

    <p>Footer of variable height</p>

  </div>

</div>

Force Bootstrap's variable height footer to the bottom of page or content, whichever is lower

You can use flexbox to achieve sticky footer.

Using flex: 1 0 auto; to section will make it flexible, it will acquire all available free space in flex-container.

flex: <positive-number>

Makes the flex item flexible and sets the flex basis to zero,
resulting in an item that receives the specified proportion of the
free space in the flex container. If all items in the flex container
use this pattern, their sizes will be proportional to the specified
flex factor.Equivalent to flex: 1 0.

html,

body {

  margin: 0;

  padding: 0;

}

html {

  height: 100%;

}

body {

  min-height: 100%;

  display: flex;

  flex-direction: column;

  height: 1px; /* Height hack for IE */

}

header,

footer {

  padding: 10px;

  color: white;

  background-color: #000;

}

section {

  flex: 1 0 auto; /* This will make section flexible */

}

<header>Header</header>

<section></section>

<footer>Footer</footer>

Keep footer at bottom of page when page height dynamically changes using CSS

First of all if you want to use position: absolute, then the parent should be other that the initial position, like position: relative or it will look the first parent element what is positioned relative. So if you add the position: relative to body, the footer will be dynamic.

But absolutely positioned elements are completely removed from the document flow, so in this case it will overlap on other elements, but we can solve if we add the transform: translateY(100%)

so in the end you will have:

body {
    margin: 0;
    position: relative;
}

footer {
    position: absolute;
    background: #ededed;
    padding: 25px;
    color: #000;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateY(100%);
}

How to keep footer at the bottom even with dynamic height website

I believe you are looking for a Sticky Footer

Try this: https://web.archive.org/web/20161117191810/http://ryanfait.com/sticky-footer/ (archive)

From the article above:

layout.css:

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

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

The html page:

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

How can a variable-height sticky footer be defined in pure CSS?

All other solutions here are out of date and either use JavaScript, or table hacks.

With the advent of the CSS flex model, solving the variable-height sticky footer problem becomes very, very easy: while mostly known for laying out content in the horizontal direction, Flexbox actually works just as well for vertical layout problems. All you have to do is wrap the vertical sections in a flex container and choose which ones you want to expand. They'll automatically take up all the available space in their container.

Note how simple the markup and the CSS are. No table hacks or anything.

The flex model is supported by 96%+ of the browsers in use today.

html, body {

  height: 100%;

  margin: 0; padding: 0;  /* to avoid scrollbars */

}

#wrapper {

  display: flex;  /* use the flex model */

  min-height: 100%;

  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */

}

#header {

  background: yellow;

  height: 100px;  /* can be variable as well */

}

#body {

  flex: 1;

  border: 1px solid red;

}

#footer{

  background: lime;

}

<div id="wrapper">

  <div id="header">Title</div>

  <div id="body">Body</div>

  <div id="footer">

    Footer<br/>

    of<br/>

    variable<br/>

    height<br/>

  </div>

</div>

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 to keep included footer at bottom of short page without min-height, sticky-footer or javascript

I know this post is pretty old, but I found a great resource for this exact thing.

http://ryanfait.com/sticky-footer/

here is just the css:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    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 */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Good luck.

Keep Footer with Variable Height on Bottom