无法将页脚放到底部，而不是在我的主体内容中间

Question

我非常了解编码（第一次），我已经搜索了7个小时来解决我的问题，但似乎无法做到正确。我试图让我的页脚保持在我的页面上的主要内容之下但不能正确。我已经弄乱了定位等，并在这里研究了其他人的答案，但没有人帮助过。

我有一个容器div，里面还有3个divs＆＃39; header＆＃39; ＆＃39;主体＆＃39; ＆＃39;页脚＆＃39 ;. 我的代码如下：

＆＃13;

＆＃13;

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}

＆＃13;

body {
  padding: 0;
  margin: auto;
  background-color: #f0f4f6;
}


/*Global */

.container {
  width: auto;
  overflow: hidden;
}


/*Header **/

header {
  background: #f0f4f6;
  padding-top: 20px;
  min-height: 70px;
  list-style-type: none;
}

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: auto;
  height: auto;
}

header li {
  display: inline-block;
  padding: 14px 16px;
  color: #f0f4f6;
  text-decoration: none;
  text-align: center;
  vertical-align: top;
  width: auto;
  height: auto;
}

header img {
  float: left;
  padding: 0 0 20px 0;
  width: auto;
  height: auto;
}

header nav {
  margin: 80px;
  float: right;
}

header .current a {
  color: #93d9e6;
  font-weight: bold;
}

header a:hover {
  color: #93d9e6;
  font-weight: bold;
}

* {
  box-sizing: border-box
}


/* Slideshow container */

div slideshow-container {
  position: relative;
  background-color: #f0f4f6;
  margin: 100%;
  padding: 4px;
}

.slideshow-container {
  width: 95%;
  position: relative;
  margin: auto;
}

.mySlides {
  display: none;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}


/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


/* Caption text */

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}


/* Number text (1/3 etc) */

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* The dots/bullets/indicators */

.dot {
  cursor: pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}


/* Fading animation */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}


/*Main Body */

#boxes {
  float: left;
  align: left;
  width: 50%;
  position: static;
}

h1 {
  font: 30px arial;
  font-size: 1.875em;
}

h2 {
  font: 24px arial;
  font-size: 1.5em;
}

.image1 {
  float: right;
  position: static;
}

.image2 {
  float: right;
  position: static;
}

.image3 {
  float: right;
  position: static;
}


/*footer*/

footer {
  padding: 20px;
  margin-top: 20px;
  background-color: #4985c5;
  text-align: left;
}

h3 {
  font: 18px arial;
  font-size: 1.3333333333333333em;
  font-weight: bold;
}

h4 {
  font: 14px arial;
  font-size: 0.8750em;
}

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

#container {
  min-height: 100%;
  position: relative;
  margin-bottom: 20px;
}

body {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

.header {
  background: #f0f4f6;
  padding: 10px;
}

.body {
  padding: 10px;
  padding-bottom: 60px;
  /* Height of the footer */
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  /* Height of the footer */
  background: #4985c5;
}

.clearfooter {
  clear: both;
}

＆＃13;

<div class="container">
  <div class="header">
    <header>
      <div id="Logo">
        <img src="images/hike_adventure_logo.png" width="220" height="125" alt="" />
      </div>
      <nav>
        <ul>
          <li class="current"><a href="index.html">Home</a></li>
          <li><a href="index.html">Sample Link</a></li>
          <li><a href="index.html">Sample Link</a></li>
          <li><a href="index.html">Sample Link</a></li>
        </ul>
      </nav>
    </header>
  </div>
  <div class="body">

    <body>
      <div class="slideshow-container">
        <div class="mySlides fade">
          <div class="numbertext">1 / 3</div>
          <img src="images/Monument_Valley_Adventure_slider.jpg" style="width:100%">
          <div class="text">Monument Valley</div>
        </div>
        <div class="mySlides fade">
          <div class="numbertext">2 / 3</div>
          <img src="images/Mountain_Adventure_slider.jpg" style="width:100%">
          <div class="text">Mountain</div>
        </div>
        <div class="mySlides fade">
          <div class="numbertext">3 / 3</div>
          <img src="images/Skiing_Adventures_slider.jpg" style="width:100%">
          <div class="text">Skiing Adventure</div>
        </div>
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
      </div>
      <br>
      <div style="text-align:center">
        <span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
        <span class="dot" onclick="currentSlide(3)"></span>
      </div>
      <section id="boxes">
        <div class="hike">
          <h1>Welcome to Hike Adventures</h1>
          <h2>Safari Adventures</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae bibendum libero, et aliquet nulla. Praesent molestie, nulla rutrum accumsan blandit, nisl diam iaculis neque, at laoreet justo lacus et tortor. Curabitur a turpis id urna auctor
            finibus ut ut elit. Phasellus commodo congue tincidunt. In quis interdum urna. Etiam pharetra ante rutrum massa sodales hendrerit vel eu lacus. Proin lorem magna, faucibus placerat mi vitae, ullamcorper tincidunt dolor. Morbi aliquam nulla
            vel viverra imperdiet. Nam tempor ante vel magna condimentum convallis.</p>
        </div>
        <aside class="image1">
          <img src="images/safari_adventure_t.jpg" alt="Safari Adventures">
        </aside>
        <br>
        <div class="sky">
          <h2>Parachuting Adventures</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae bibendum libero, et aliquet nulla. Praesent molestie, nulla rutrum accumsan blandit, nisl diam iaculis neque, at laoreet justo lacus et tortor. Curabitur a turpis id urna auctor
            finibus ut ut elit. Phasellus commodo congue tincidunt. In quis interdum urna. Etiam pharetra ante rutrum massa sodales hendrerit vel eu lacus. Proin lorem magna, faucibus placerat mi vitae, ullamcorper tincidunt dolor. Morbi aliquam nulla
            vel viverra imperdiet. Nam tempor ante vel magna condimentum convallis.</p>
        </div>
        <aside class="image2">
          <img src="images/sky_adventures_t.jpg" alt="Sky Adventures">
        </aside>
        <br>
        <div class="tropical">
          <h2>Tropical Adventures</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae bibendum libero, et aliquet nulla. Praesent molestie, nulla rutrum accumsan blandit, nisl diam iaculis neque, at laoreet justo lacus et tortor. Curabitur a turpis id urna auctor
            finibus ut ut elit. Phasellus commodo congue tincidunt. In quis interdum urna. Etiam pharetra ante rutrum massa sodales hendrerit vel eu lacus. Proin lorem magna, faucibus placerat mi vitae, ullamcorper tincidunt dolor. Morbi aliquam nulla
            vel viverra imperdiet. Nam tempor ante vel magna condimentum convallis.</p>
        </div>
        <aside class="image3">
          <img src="images/tropical_adventures_t.jpg" alt="Tropical Adventures">
        </aside>
      </section>
      <br>
    </body>
  </div>
  <div class="clearfooter">
  </div>
  <div class="footer">
    <section id="footer">
      <footer>
        <h1>Explore with us...</h1>
        <h3>Subscribe to our newsletter!</h3>
        <form>
          <input type="email" placeholder="" name="Subscribe to Newsletter...">
          <button type="submit" class="button_2" name="button">Subscribe</button>
        </form>
        <h4>Hike Adventure, Barrow Street, Carlow, Ireland</h4>
        <h4>Telephone: 059-9112345</h4>
        <h4>Email: info@hike_adventure.ie</h4>
      </footer>
    </section>
  </div>

＆＃13;

＆＃13;

＆＃13;

任何建议都将不胜感激。我理解我的一些编码可能不完美，但正如我所说，这是我第一次尝试这个。