Sticky Footer Not Working when Header is Fixed and Main has Top Margin?

Please paste the HTML below into your browser (using your browser's console - preferably Chrome) to see the problem I'm having.

Prerequisites :

A fixed header at the top
A main container of variable height with a top margin
A footer that sticks to the bottom of the page. Not a fixed footer but a sticky
one.

Problem : The height of .main will vary depending on its content. At certain window widths (always depending on the variable height of .main) there is a gap left between the .footer and the bottom of the window.

Goal : I want to get rid of the gap underneath .footer and I want .footer to stick to the bottom. I want it to stick, I don't want it to be fixed.

If you're confused simply paste the below in your browser and play around with the window width to see what I'm talking about. :-)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="height: 100%;">
  <head>
    <style>
      body {
        margin: 0;
        height: 100%;
      }
      .fixed {
        position: fixed;
        top: 0;
        left: 0;
        height: 100px;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.11);
        z-index: 99999;
        box-sizing: border-box;
        border: 5px solid black;
      }
      .main {
        position: relative;
        border: 5px solid rgb(0, 255, 42);
        box-sizing: border-box;
        width: 100%;
        height: auto;
        line-height: 1.3;
        color: white;
        padding: 45px;
        background-color: green;
        top: 100px;
      }
      .footer {
        width: 100%;
        height: 200px;
        background-color: rgba(255, 0, 0, 1);
        border: 5px solid blue;
        box-sizing: border-box;
        top: 100px;
        position: relative;
      }
    </style>
  </head>
  <body>
    <div class="fixed"></div>
    <div class="main">gaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd</div>
    <div class="footer"></div>
  </body>
</html>

Solution

i suggest using the sticky-footer-approach and add a fixed navbar:

http://jsfiddle.net/L8m54b5t/1/

html

<div class="page-wrap">

    Content!

</div>

<footer class="site-footer">
    I'm the Sticky Footer.
</footer>

css

* {
    margin: 0;
}
html, body {
    height: 100%;
}

.fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px;
        background: #eee;
}

.page-wrap {
        padding-top: 100px;
    min-height: 100%;
    margin-bottom: -142px; 
        box-sizing:border-box;
}
.page-wrap:after {
    content: "";
    display: block;
}
.site-footer, .page-wrap:after {
    height: 142px; 
}
.site-footer {
    background: orange;
}