Sticky footer with variable height in bootstrap
<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>