title: Sticky footer with variable height in bootstrap
body: <p>I am trying to get a sticky footer with a custom height on my website and it is proving far more difficult then I had anticipated.</p>
  
  <p>Here is a screen shot of my footer at the moment:</p>
  
  <p><a href="https://i.stack.imgur.com/SXaTA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/SXaTA.png" alt="enter image description here"></a></p>
  
  <p>The footer is covering my contact form because I have explicitly set a height of 419 px.</p>
  
  <p>On a page where the content is shorter then the screen the footer sticks to the bottom fine... but only because I have explicitly set the height.</p>
  
  <p><a href="https://i.stack.imgur.com/DWjHN.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DWjHN.png" alt="enter image description here"></a></p>
  
  <p>Here is my CSS and HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
      position: relative;
      min-height: 100%;
  }
  
  body {
      background: #ffffff;
  }
  
  body &gt; .container {
      padding-bottom: 100px;
  }
  
  /* footer */
  footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      /* Set the fixed height of the footer here */
      height: 419px;
      background-color: #222;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;&lt;/title&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;!-- navigation --&gt;
          &lt;nav class="navbar navbar-default"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;a class="navbar-brand" href=""&gt;
                          &lt;img alt="" src=""&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div id="navbar" class="navbar-collapse collapse"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li&gt;
                              &lt;a class="" href=""&gt;
                                  &lt;i class="fa fa-home" aria-hidden="true"&gt;&lt;/i&gt;
                                  Home
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a class="" href=""&gt;
                                  &lt;i class="fa fa-certificate"&gt;&lt;/i&gt;
                                  Courses
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a class="" href=""&gt;
                                  &lt;i class="fa fa-lightbulb-o"&gt;&lt;/i&gt;
                                  Our Method
                              &lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                          &lt;li&gt;
                              &lt;a class="sign-in" href=""&gt;
                                  Dashboard
                                  &lt;i class="fa fa-tachometer"&gt;&lt;/i&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
          &lt;!-- end navigation --&gt;
  
          &lt;!-- main content --&gt;
          &lt;main&gt;
  
          &lt;/main&gt;
          &lt;!-- end main content --&gt;
  
          &lt;!-- footer --&gt;
          &lt;footer&gt;
              &lt;div class="container-fluid bg-footer"&gt;
                  &lt;div class="container"&gt;
  
                      &lt;!-- footer menus --&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-3"&gt;
                              &lt;h3&gt;About&lt;/h3&gt;
  
                          &lt;/div&gt;
                          &lt;div class="col-md-3"&gt;
                              &lt;h3&gt;Help&lt;/h3&gt;
                              &lt;ul class="list-unstyled"&gt;
                                  &lt;li&gt;
                                      &lt;a href=""&gt;
                                          Go to a class
                                      &lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a href=""&gt;
                                          Find an order
                                      &lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a href=""&gt;
                                          Courses
                                      &lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a href=""&gt;
                                          Jobs
                                      &lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a href=""&gt;
                                          Contact us
                                      &lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a href=""&gt;
                                          About us
                                      &lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-3"&gt;
                              &lt;h3&gt;Social&lt;/h3&gt;
                              &lt;ul class="list-unstyled"&gt;
                                  &lt;li&gt;
                                      &lt;h3&gt;
                                          &lt;i class="fa fa-facebook" aria-hidden="true"&gt;&lt;/i&gt;
                                      &lt;/h3&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;h3&gt;
                                          &lt;i class="fa fa-twitter" aria-hidden="true"&gt;&lt;/i&gt;
                                      &lt;/h3&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;h3&gt;
                                          &lt;i class="fa fa-vk" aria-hidden="true"&gt;&lt;/i&gt;
                                      &lt;/h3&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-3"&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;a class="btn btn-alt btn-block" href=""&gt;
                                      Student Login
                                  &lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;a class="btn btn-alt btn-block" href=""&gt;
                                      Teacher Login
                                  &lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!-- end footer menus --&gt;
  
                      &lt;hr&gt;
  
                      &lt;!-- footer subtext --&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-12"&gt;
                              &lt;span class="text-muted"&gt;
                                  High quality English lessons
                                  &lt;div class="pull-right"&gt;
                                      &lt;a href=""&gt;Privacy&lt;/a&gt; | &lt;a href=""&gt;Terms and Conditions&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!-- end footer subtext --&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- sub footer --&gt;
              &lt;div class="container-fluid bg-copyright"&gt;
                  &lt;div class="container"&gt;
                      &lt;p class="copyright"&gt;
                          &amp;copy; 2016 Toucan-Talk.com ltd
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- end sub footer --&gt;
  
          &lt;/footer&gt;
          &lt;!-- end footer --&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I make the footer stick to the bottom of the page a). without it overlapping onto my content and b). without having to explicitly set the height of the footer.</p>