How to make the footer positioned at the bottom of all screen sizes when you have different height pages?

Question

I'm trying to make a sticky footer but for some reason(s) it is playing up. I have few pages with different content height therefor when I set the footer on one of them it ruin the others. How can I make a global style for all pages in order to have a sticky footer to the bottom of the pages and also remove any scrolling if there is not need for it as some of my pages require a scroll to reach the footer while the content is about have height.

As I test my site using a website called screen-fly to enable testing on all screen sizes I need a solution that can guarantee a responsive design on any screen size please.

My Code is available on plunker , however I researched a lot and tried some solutions for styling. Here are two of them

Solution 1 :-

/* **************************************************/
                      /* One solution */
    html, body {
      height:100%;
      min-height:100%;
  }
                      /*  navigation style*/
  .navbar-brand {
    margin: 0 auto;
    color:white;
  }
  .navbar-inverse {
    background: rgb(14, 78, 114);
  }
  .navbar-inverse .navbar-nav>li>a {
    color: #8EE8CD;
  }

  /* Content style*/
  .container.content {
    margin-top: 100px;
  }

                      /*  footer style*/
  .wrapper {
      position:relative;
      min-height:100%;
  }
  footer {
      text-align: center;
      position:absolute;
      bottom:0px;
      width:100%;
      color: white;
     background-color: rgb(14, 78, 114);
  }

Solutoin 2:-

/*   Another solution */

  html, body {height: 100%;}

  #wrap {min-height: 100%;}

  #main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

  #footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

  /*Opera Fix*/
  body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
  }

Here are some likns of the code.

plunker Editor: Plunker Editor

plunker full screen: Plunker Full Screen

My site on screenfly: Screenfly Site

Answer 1

Use CSS calc() function. According to your plunkr example give min-height to .container.content instead to giving min-height to html, body, wrapper.

Look at the updated Plunkr.

---

Logic used to give min-height:

.container.content {
  min-height: calc(100vh - 140px);
}

In the above code:

• vh: Viewport Height (100vh gives total screen height)
• 140px: 100px for header + 20px for footer + 20px for top margin of footer.

So we are just subtracting the rest of the divs from total viewport height.