header, main and footer positioning

Question

My page is divided in to 3 pieces. The header the main and the footer. The header is fixed to the top and is 109px with its 6px border high so the main has a 109px margin to the top. I want the main to extend over the entire page below the header and to the footer that should, if no content that is available to push it down, rest on the bottom of the screen. The footer is 86px high because it is 80px and 6px for a border at the top. How can I achieve all this. I have no Idea

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

body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  position: relative;
  margin: 0;
  padding-bottom: 9rem;
  min-height: 100%;
}


/* ---------------------------------------------------------------- */

main {
  margin-top: 109px;
  text-align: center;
  min-height: 100%;
  min-width: 100%;
}

#header {
  background-color: #25211e;
  border-bottom: 6px solid #1d1a18;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 103px;
  box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.75);
  z-index: 99;
}

#heading {
  font-family: "Arial";
  color: #c1b497;
  font-size: 45px;
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 15px;
}


/* ---------------------------------------------------------------- */

#footer {
  background-color: #25211e;
  border-top: 6px solid #1d1a18;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 80px;
  z-index: 98;
}

#credit {
  font-family: "Helvetica";
  font-size: 14px;
  color: #c1b497;
  font-weight: 600;
}

<div id="all">
  <header id="header">
    <h1 id="heading">My Page</h1>
  </header>
  <main id="main">



  </main>
  <footer id="footer">
    <p id="credit">FOOTER</p>
  </footer>
</div>

Answer 1

You just need to remove the padding-bottom from the body and replace the margin-top by padding-top & padding-bottom:

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

body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 100%;
}

/* ---------------------------------------------------------------- */

main {
  padding-top: 109px;
  padding-bottom: 86px;
  text-align: center;
}

#header {
  background-color: #25211e;
  border-bottom: 6px solid #1d1a18;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 103px;
  box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.75);
  z-index: 99;
}

#heading {
  font-family: "Arial";
  color: #c1b497;
  font-size: 45px;
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 15px;
}

#navigation {
  margin: 0px;
  margin-bottom: 20px;
  padding: 0px;
}

.navigationlink {
  font-family: "Helvetica";
  text-decoration: none;
  font-weight: 800;
  color: #ffffff;
  font-size: 11px;
  height: 52px;
  letter-spacing: 1px;
  margin: 0 10px;
  padding-left: 0px;
  padding-right: 0px;
  position: relative;
  text-transform: uppercase;
  transition: color 0.3s;
}

.navigationlink:hover {
  color: #c1b497;
}

.activelink:hover {
  border-bottom-color: #c1b497;
}

.activelink {
  border-bottom: 2px solid #ffffff;
  transition: color 0.3s;
}

/* ---------------------------------------------------------------- */

#footer {
  background-color: #25211e;
  border-top: 6px solid #1d1a18;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 80px;
  z-index: 98;
}

#credit {
  font-family: "Helvetica";
  font-size: 14px;
  color: #c1b497;
  font-weight: 600;
}

<div id="all">
  <header id="header">
    <h1 id="heading">My Page</h1>
    <nav id="navigation">
      <a class="navigationlink activelink" href="index.html">Home</a>
      <a class="navigationlink" href="page1.html">Page1</a>
      <a class="navigationlink" href="page2.html">Page2</a>
      <a class="navigationlink" href="page3.html">Page3</a>
      <a class="navigationlink" href="page4.html">Page4</a>
    </nav>
  </header>
  <main id="main"></main>
  <footer id="footer">
    <p id="credit">FOOTER</p>
  </footer>
</div>