How do I make my footer take up the remaining height when I'm not using a flexbox page layout?

Question

I wanted to create a footer that would take up the remainder of the unused space on my page. I found this example -- Make a div fill the height of the remaining screen space, but it uses flex boxes and I'm not using that in my current page:

html {
  height: 100%;
}

body {
  margin: 0;
  text-align: center;
  height: 100%;
}

footer {
  background-color: #003162;
  padding: 5px;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 80%;
}

footer a {
  color: #fdb515;
}

<header>
  <div id="banner">
    Header
  </div>
</header>

<div id="main">Content</div>

<footer><a href='#'>Terms of Service</a></footer>

What is odd is that the footer is taking up too much space. It is causing a scroll even though that's not what I requested -- https://jsfiddle.net/g7Ldc7pt/2/ . How do I tell the footer to take up the remaining visible space? I only want a scroll bar if the content isn't visible but its all there.

Answer 1

The only way to make a footer using the remaining part of the website is 1. to set a specific height to the header and the content and 2. to set the height of the footer to "calc(100% - (HEIGHT_OF_HEADER + HEIGHT_OF_CONTENT) I also tried it with Javscript but no chance... Tipp: Use my Code in Full Page Mode

html {
    height: 100%;
}

body {
    margin: 0;
    text-align: center;
    height: 100%;
}

header{
  height: 60px;
}

#main{
  height: 400px
}


footer {
    background-color: #003162;
    padding: 5px;
    height: calc(100% - 470px);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
}

footer, footer a {
        color: #fdb515;
}

<header>
  <div id="banner">
    Header
  </div>
</header>

<div id="main">Content</div>

<footer><a href='#'>Terms of Service</a></footer>

Answer 2

The only non-flex & non-grid dynamic solution is possible with the display: table on the parent and display: table-row on the child element:

html, body {
  height: 100%; /* mandatory */
}

body {
  display: table; /* added */
  width: 100%; /* added  */
  margin: 0;
  text-align: center;
}

footer {
  display: table-row; /* added */
  height: 100%; /* mandatory */
  background-color: #003162;
  /*padding: 5px; has no effect, that's why you need to put it on the "td" child */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 80%;
}

footer a {
  display: table-cell; /* added */
  padding: 5px; /* added */
  color: #fdb515;
}

<header>
  <div id="banner">
    Header
  </div>
</header>

<div id="main">Content</div>

<footer><a href='#'>Terms of Service</a></footer>