'Responsive footer always in bottom

I'm having trouble by creating a responsive footer that always stay on the bottom of the page. The code I'm actually using is this:

body
{
    margin: 0 0 200px; //Same height of the footer
}
footer
{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 200px;
    width: 100%;
    overflow: auto;
    background-color: rgba(67, 191, 115, 0.95);
}

I use:

<div class='main-content'>
//Content
</div>
<footer>
//Footer content
</footer>

Well, the problem is if I resize the screen and the content is larger than the resolution the footer lets a white space, like this: enter image description here

I am trying to solve this problem. If I use position: fixed the problem disappears, but I don't want the footer following the scroll. I think the problem is in the 100 percent width. The footer of this site, Stack Overflow, works as I need. If I resize the window the footer remains the same, no white space. How to achieve this? How to make the footer cover all the width without let white space even if the resolution is lower than the page like occurs here, in Stack Overflow?

css

Solution 1:^[1]

Try this code....
CSS

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
}
.container .credit {
  margin: 20px 0;
}

HTML

  </ul>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

      <!-- Begin page content -->
      <div class="container">

        <div class="page-header">
          <h1>Sticky footer</h1>
        </div>
        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
        <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
      </div>
    </div><!-- Wrap Div end -->

    <div id="footer">
      <div class="container">
        <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
  </body>
</html>

Solution 2:^[2]

This jsfiddle I am creating based on your html.

This is work as responsive, I am not seen any issue as you tell.

I think may be the issue with height:200px , just remove and check.

Still you have issue , update the jsfiddle.

Solution 3:^[3]

You should indeed use fixed positioning. This is what we do in our apps, running on browsers and Android/iOS devices:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body
            {
                margin: 0;

                /*
                   This height just to show that the footer stays at the
                   bottom of the page even when scrolling all the way down.
                */
                height:2000px;
            }
            footer
            {
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                height: 200px;
                overflow: auto;
                background-color: rgba(67, 191, 115, 0.95);
            }
        </style>
    </head>
    <body>
        <div class='main-content'>
            //Content
        </div>
        <footer>
            //Footer content
        </footer>
    </body>
</html>

Of course, you are using HTML5 so this page will not work on older browsers (IE7, IE8).

I hope this helps :)

Solution 4:^[4]

I like flexbox. CSS tricks - Guide to Flexbox Try this:

main {
    height: 95vh;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-around;
    align-items: center; }
header,
footer  { flex: 0 1 auto; }
article { flex: 10 1 auto; }

<main>
    <header>Title Here</header>
    <article>Main Article</article>
    <footer>Copyright and Contact Me</footer>
</main>

Solution 5:^[5]

Thanks to Galen Gidman https://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/ for this:

<header class="page-row">
    <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
    <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

And the CSS:

html,
body {height: 100%;}

body {display: table; width: 100%;}

.page-row {display: table-row; height: 1px;}

.page-row-expanded {height: 100%;}

Galan: The only real caveat to this solution that I’ve encountered so far is the styling limitations present with elements using display: table-row. Often padding, margin, etc. don’t behave as expected. This is easy enough to work around by adding a or something inside the .page-row and styling that.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Jaffer Wilson
Solution 2	Ajay2707
Solution 3	Alex Domenici
Solution 4	kevinB
Solution 5	RationalRabbit

'Responsive footer always in bottom

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]