Section not working with CSS Sticky Footer

I'm trying to get the footer to stay on the bottom of the page, even if the content is too short. I do not want a fixed footer. I want a sticky footer.

I have a section that is causing the issues. I just want the section to fill the space to the footer, and not have a scroll bar unless there is one necessary.

http://fabricatorsunlimited.com/test/quartzcare.html

This is the page I'm working on since there is no content. Are you can see, you have to scroll to view the scroll bar, even though there is no content.

HTML

<head>
</HEAD>

<body class="size-960">
<section> 

<!-- HEADER -->
<header>
</header> 

<!-- HOME PAGE BLOCK -->      
<div class="line">
<div class="margin"></div></div>

<!-- ASIDE NAV AND CONTENT -->
<div class="line">
<div class="box margin-bottom">
<div class="margin"> 

<!-- CONTENT --> 
<article class="s-12 l-8">
<h1>Quartz Care</h1>
<p>....</p>

</div></article></div></div>

</section>

<!-- FOOTER -->
<footer>

</footer>
</body>
</html>

CSS

    * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;}

html {height: 100%;
box-sizing: border-box;}

*,*:before,*:after {box-sizing: inherit;}

body {
font-family: "Open Sans";
color: #413D3D;
background: url("bodyback.png");
position: relative;
min-height: 100%;}

.box {
background: #ffffff;
padding: 1.25em;
margin-top: 20px;
border-top: 1px #0068B3 solid;
background-color:#ffffff;
min-height: 100%;}

section {
min-height: 100%;
padding-bottom: -85px;}

footer {
background: #959595;
position: absolute;
right: 0;
bottom: 0;
left: 0;
color: #ffffff;
height: 85px;}

Solution

There's two problems. The first is that your header and section take up more space than you have adjusted for in your section. Secondly, you should use margin-bottom instead of padding-bottom when you adjust for the footer height (negative padding isn't supported).

So what you need to do is to put the header and main section in a common wrapper element. That wrapper element is the one that should adjust for the footer height using the following "trick":

min-height: 100%; 
margin-bottom: -85px;

Something like this:

<html>
  <body>
    <div class="wrapper">
      <header></header>
      <section></section>
    </div>
    <footer></footer>
  </body>
</html>

with this styling:

* {
  margin: 0;
}

html, body {
  height: 100%;
}

.wrapper {
  background: red;
  min-height: 100%;
  margin-bottom: -85px; 
}

.wrapper:after {
  content: "";
  display: block;
}

footer {
  background: blue;
  height: 85px;
}

Here's a fiddle showing it: https://jsfiddle.net/63fo4tq4/