title: Can't stick my footer to the end of the page
body: <p>I am currently learning CSS &amp; HTML and have a bit of trouble. My footer doesn't want to stick to the bottom; it floats above the bottom with space under it (like it had a margin on the bottom, even though it doesn't). I tried with most of the tips I found online, but most of them either don't work or make the header behave weird when the windows are resized (sometimes it puts it in the middle etc.)</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Pooblaščeni Prodajalci&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="icon" type="image/png" href="photos/adidas.png"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/trgovine.css"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header class="tm-header"&gt;
          &lt;div class="tm-container"&gt;
              &lt;a href="index.html"&gt;&lt;img class="tm-logo"src="photos/adidas.png" width="80px" height="" alt="logo"&gt;&lt;/a&gt;
              &lt;nav class="tm-nav"&gt;
                  &lt;ul&gt;
                      &lt;li class="hover_menu"&gt;&lt;a href="index.html"&gt;Domov&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="hover_menu"&gt;&lt;a href="about.html"&gt;O nas&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="current_page"&gt;&lt;a href="#"&gt;Pooblaščeni Prodajalci&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="hover_menu"&gt;&lt;a href="index.html"&gt;Storitve&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="hover_menu"&gt;&lt;a href="index.html"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/header&gt;
      &lt;div class="tm-container"&gt;
          &lt;div class="tm-content"&gt;
              &lt;section&gt;
                  &lt;article&gt;
                      &lt;h1 style="text-align: center; font-size: 50px;"&gt;Naši pooblaščeni prodajalci&lt;/h1&gt;
                      &lt;div&gt;
                          &lt;span class="trgovine"&gt;&lt;a href="https://www.superge.si/" target="_blank"&gt;&lt;img src="photos/superge_logo.png" alt="superge_logo" width="509px" height="200px"&gt;&lt;/a&gt;&lt;/span&gt;
                          &lt;span class="trgovine"&gt;&lt;a href="https://www.hervis.si/store/" target="_blank"&gt;&lt;img src="photos/Hervis_logo.png" alt="hervis_logo" width="509px" height="200px"&gt;&lt;/a&gt;&lt;/span&gt;
                          &lt;span class="trgovine"&gt;&lt;a href="http://sl.sportsdirect.com/" target="_blank"&gt;&lt;img src="photos/sports-direct-logo.png" alt="sportsdirect_logo" width="500px" height="200px"&gt;&lt;/a&gt;&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;span class="trgovine"&gt;&lt;a href="https://www.intersport.si/shop/" target="_blank"&gt;&lt;img src="photos/intersport_logo.png" alt="intersport_logo" width="509px" height="200px"&gt;&lt;/a&gt;&lt;/span&gt;
                          &lt;span class="trgovine"&gt;&lt;a href="https://www.prva-liga.si/" target="_blank"&gt;&lt;img src="photos/prva-liga-logo.jpg" alt="prvaliga_logo" width="509px" height="200px"&gt;&lt;/a&gt;&lt;/span&gt;
                          &lt;span class="trgovine"&gt;&lt;a href="http://www.decathlon.si/" target="_blank"&gt;&lt;img src="photos/decathlon_logo.png" alt="decathlon_logo" width="500px" height="200px"&gt;&lt;/a&gt;&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;span class="trgovine"&gt;&lt;a href="https://www.tomassport2.si/" target="_blank"&gt;&lt;img src="photos/tomassport-logo.png" alt="tomassport_logo" width="509px" height="200px"&gt;&lt;/a&gt;&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/article&gt;
              &lt;/section&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="tm-footer"&gt;
          &lt;footer&gt;
              &amp;copy; copyright Adidas 2017
          &lt;/footer&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is the CSS:</p>
  
  <pre><code>* {
      margin: 0;
      padding: 0;
      font-family: 'Roboto', sans-serif;
  }
  body {
      background-image: url('../photos/background.jpg');
      background-repeat: no-repeat;
      background-attachment: fixed;
  }
  .tm-container{
      max-width: 1600px;
      margin: 0 auto;
  }
  .tm-container{
      max-width: 1600px;
      margin: 0 auto;
  }
  .tm-header{
      background: #fff;
      height: 64px;
  }
  .tm-logo{
      padding-left: 50px;
      float: left;
  }
  .tm-nav {
      float: right;
  }
  .tm-nav ul li{
      display: inline-block;
      margin-bottom: 0px;
  }
  .tm-nav ul li a{
      padding-bottom: 10px;
      padding-top: 10px;
      padding-left: 15px;
      padding-right: 15px;
      text-decoration: none;
      color: #303030;
      line-height: 64px;
      font-size: 15px;
      text-align: right;
      border: 1px solid transparent;
  }
  .tm-container ul li a:hover{
      color: #000000;
      text-shadow: 1px 0 0 currentColor;
      border: 1px solid #303030;
  }
  .current_page a{
      pointer-events:none;
      font-weight: 900;
  }
  p {
      margin-bottom: 20px;
  }
  h1, h2, h3, h4, h5, h6 {
      margin-bottom: 10px;
  }
  ul, ol{
      margin-left: 20px;
      margin-bottom: 20px;
  }
  .tm-content{
      margin-top: 30px;
      margin-bottom: 20px;
      max-width: 100%;
      position: relative;
  }
  .tm-article{
      background-color: white;
      padding: 30px;
  }
  section {
      background-color: white;
  }
  .trgovine img{
      border: 1px solid blue; 
      max-width: 33%;
      width: 27%;
      margin-right: 3%;
      margin-left: 3%;
      margin-top: 10px;
      margin-bottom: 10px;
      border: 1px solid black;
      display: in-line;
  }
  .tm-footer{
      text-align: center;
      background-color: white;
      padding: 10px;
      font-weight: 700;
      margin-top: 30px;
      clear: both;
  }
  </code></pre>
  
  <p>Here is a picture of how it actually looks:
  <a href="https://i.stack.imgur.com/u4Azf.png" rel="nofollow noreferrer">The arrows show the space below</a></p>
  
  <p>EDIT: It´s not a duplicate, as the duplicate´s solutions don´t solve this problem</p>