How to push a footer to the bottom of page when content is short or missing?

Question

I have a page with an outer div that wraps a header, content and footer div. I want the footer div to hug the bottom of the browser, even when the content div is not tall e

Answer 1

I tried: http://jsfiddle.net/AU6yD/ as here it's the best option but I had problems when the content of the <div id="wrapper"> started to get too big see evidence.png, what I did to solve this was refreshing the body size everytime I changed the content of that div like this:

var body = document.body,
html = document.documentElement;
body.style.height = 100 + "%";
setTimeout(function(){
   var height = Math.max( body.scrollHeight, body.offsetHeight,
                          html.clientHeight, html.scrollHeight, 
                          html.offsetHeight );
   body.style.height = height + "px";
}, 500);

Answer 2

To make it work responsively when the footer is taller on mobile devices compare to on desktop, you can't really know the footer height. One way to do it is to stretch the footer out to cover the entire screen.

html,
body {
  height: 100%;
}

.container {
  min-height: 80%;
  background-color: #f3f3f3;
}

.footer {
  background-color: #cccccc;
  box-shadow: 0px 500px 0px 500px #cccccc;
}

<div class="container">Main content</div>
<div class="footer">Footer</div>

Answer 3

Reworking the jQuery solution. I have it working with resizing the window. When the window is bigger than the page, the footer style's position is "absolute" fixed at the bottom the window. When the window is smaller than the page, the footer stays at the bottom of the page - scrolling off the bottom.

<style>
    .FooterBottom {
        width:100%;
        bottom: 0;
        position: absolute;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        FooterPosition();

        $(window).resize(function () {
            FooterPosition();
        });
    });

    var originalFooterBottom = 0;

    function FooterPosition() {
        var windowHeight = $(window).height();
        if (originalFooterBottom == 0) {
            var footer = $("#Footer");
            originalFooterBottom = footer.position()['top'] + footer.height();
        }

        if (windowHeight > originalFooterBottom) {
            var footerElement = document.getElementById("Footer");
            if (!footerElement.classList.contains('FooterBottom')) {
                footerElement.classList.add('FooterBottom');
            }
        }
        else {
            var footerElement = document.getElementById("Footer");
            if (footerElement.classList.contains('FooterBottom')) {
                footerElement.classList.remove('FooterBottom');
            }
        }

    }
</script>

I tried many style only solutions but none of them worked. This Javascript/Style solution works just fine for me, even with its odd mix of jQuery and GetElement.

Thanks to Asad for his post.

Answer 4

Try with this codepen.io/dendii/pen/LLPKJm media responsive

html, body {
  color:#fff;
}
.wrapper{
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 auto;
    min-height: 100vh;
}
.main{
  width:100%;
  overflow:hidden;
}
.main-inner {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
article,aside{
  float:left;
  padding:20px 10px;
}
article{
  width:70%;
  background:darkred;
}
aside{
  width:30%;
  background:darkblue;
}
.top {
  padding:20px 10px;
  height:100%;
  background:darkgreen;
}
.bottom,.text-mid {
  padding:20px 10px;
  height:100%;
  background:darkorange;
}
.text-mid {
  margin-top: auto;
  background:darkgrey;
}
@media (max-width: 768px){
  .main-inner{
    display: block;
  }
  article,aside{
    width:100%;
    float:none;
    display: block;
  }
}

<div class="wrapper">
    <header class="top">
      <h1>Header</h1>
    </header>
<div class="main"><div class="main-inner">
  <article>
    blank content
  </article>
  <aside>
    class sidebar
  </aside>
</div></div>
<div class="text-mid">
    <div class="center">
        Whatever you want to keep.
    </div>
</div>
<footer class="bottom">
    <div class="footer">
        Footer
    </div>
</footer>
 </div>

Another alternative if you want a main-wrapper to adjust the screen EqualHeight

Answer 5

Your issue can be easily fixed by using flexbox. Just wrap your .container and your .footer in a flex container with a min-height: 100vh, switch the direction to column so that they stack on top of each other, and justify the content with space between so that footer will move to the bottom.

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

<div class="flex-wrapper">
  <div class="container">The content</div>
  <div class="footer">The Footer</div>
</div>

Answer 6

I did what Jahmic up top did (won't let me comment yet) except I had to use VH instead of % since I couldn't just apply it to a container class.

#inner-body-wrapper
{
    min-height: 70vh;
    min-height: -webkit-calc(100vh - 186px);
    min-height: -moz-calc(100vh - 186px);
    min-height: calc(100vh - 186px);
}