How can I make a div extend to a sticky footer?

I am using a sticky footer and have a div that I need to have extend all the way down to the footer. Unfortunately when I add height: 100%, it doesn't help. I've also tried to make it display as a table in the css but that didn't help either.

You can see it here: http://jsfiddle.net/NDk5f/2/

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"><head>
  <meta charset="utf-8">
  <link href="css/test.css" rel="stylesheet">
</head>
<body>

<div class="navbar">
Navbar
</div>


<div id="wrap">
  <div class="container fill">
    <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 class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
  </div>
  <div id="push"></div>
</div>


<div id="footer">
  Footer
</div>


</body>
</html>

CSS:

*{
    margin: 0;
}

html,
body {
  height: 100%;
}
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -50px;
}
#push,
#footer {
  height: 50px;
}
#footer {
  background-color: #f5f5f5;
}

/* Apply class .fill to div to be stretched to bottom of page */
.fill{
    height:100%;
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: red;
    padding-top:75px;
}
  .fill .row {
      height: 100%;
      display: table-row;
  }


.container
 {
  width: 940px;
}

.container {
  margin-right: auto;
  margin-left: auto;
}

.container:before,
.container:after {
  display: table;
  line-height: 0;
  content: "";
}

.container:after {
  clear: both;
}

.navbar {
  position: relative;
  z-index: 2;
  margin-bottom: 20px;
  overflow: visible;
  background-color: orange;
}

Solution

The easiest method is to use box-sizing: border-box and set fixed percentage heights on the elements. If you're looking for fixed heights on the footer/nav and dynamic heights on the content, it'll be tricky.

Usually I use a wrapper that's position: absolute to the viewport just below the header and just above the footer, and then a div inside that for the content, which uses height: 100%

The second method:

<nav>nav</nav>
<div id="wrap">
    <div class="content">content</div>    
</div>
<footer>footer</footer>

html,body { margin: 0 }
nav, footer { height: 20px; background: blue }
footer { position: absolute; bottom: 0; width: 100% }
#wrap { background: gray; position: absolute; bottom: 20px; top: 20px; right: 100px; left: 100px }
#wrap .content { height: 100% }

The wrapper will act as the fixed height for the content when the window is resized.

Fiddle

Luckily as browser's adopt css3, this will be even easier with flexbox.