title: Footer at the bottom, visible only when scrolling down past body element / past 100% of height of window?
body: <p>I want the <code>body element</code> to be in focus when opening the website and the <code>footer element</code> to be on the bottom of the body. So the <code>footer element</code> has to be after the <code>body element</code>. I don't want them to overlap. I want to have to scroll down to reach <code>footer element</code>.</p>
  
  <p><a href="https://postimg.cc/RWnSTB2N" rel="nofollow noreferrer"><img src="https://i.postimg.cc/SxgnkQr7/expl.png" alt="expl.png"></a></p>
  
  <pre><code>&lt;html&gt;    
  &lt;head&gt;
      &lt;meta charset = "utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;    
      &lt;link rel = "stylesheet" type = "text/css" href = "master.css"&gt;   
      &lt;title&gt;Home Page&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id = "container"&gt;
          &lt;div class = "top-container"&gt;
              &lt;div id = "logo"&gt;&lt;img url="logo.png" /&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class = "center-container"&gt;
              &lt;div class = "title"&gt;&lt;h1&gt;Current Settings&lt;/h1&gt;&lt;/div&gt;
              &lt;div id = "center_text_box"&gt;
                  &lt;p&gt;URL:&lt;/p&gt; &lt;p&gt;&lt;span&gt;%PLACEHOLDER_URL%&lt;/span&gt;&lt;/p&gt;
                  &lt;p&gt;URL Refresh Rate:&lt;/p&gt;&lt;p&gt;&lt;span&gt;%PLACEHOLDER_URR%&lt;/span&gt;(s)&lt;/p&gt;
                  &lt;p&gt;Brightness:&lt;/p&gt; &lt;p&gt;&lt;span&gt;%PLACEHOLDER_Brightness%&lt;/span&gt;(&amp;#37;)&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class = "bottom-container"&gt;
                  &lt;div class = "title"&gt;&lt;h1&gt;Logs&lt;/h1&gt;&lt;/div&gt;
                  &lt;div class = "text-box"&gt;%PLACEHOLDER_1%&lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;footer&gt;
          &lt;div class = "footer"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href= "http://metrici.ro/"&gt;&lt;img src="logo_icon.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href= "https://www.facebook.com/metricirecognition/"&gt;&lt;img src = "Facebook_icon.png" /&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href= "https://www.linkedin.com/company/metrici/"&gt;&lt;img src = "LinkedIn_icon.png" /&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href= "https://www.youtube.com/user/MetriciLPR"&gt;&lt;img src = "YouTube_icon.png" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;div id = "trademark"&gt;
                  &lt;span&gt;2019 TradeMark&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <pre><code>
  html {
      min-height: 100%;
      margin: 0; 
      padding: 0; 
  }
  
  body {
      margin: 0; 
      padding: 0; 
      font-family: sans-serif;
      height: 100%;
      /* overflow: hidden; */
      background-color: rgba(20,20,20,0.3);
  }
  
  #container {
      position: absolute;
      width: 100%;
      height: 100%;
      margin: 0 auto;
      padding: 0;
  }
  
  .top-container, .bottom-container, .center-container, .dropwdown-container {
      position: absolute;
  }
  
  .top-container {
      left: 30%;
      top: 0;
      height: 100px;
      width: 40%;
  }
  
  .center-container {
      left: 20%;
      top: 10%;
      width: 60%;
      height: 250px;
      background: rgba(0,0,0,0.2);
  }
  
  .bottom-container {
      left: 10%;
      bottom: 0; 
      height: 350px;
      width: 80%;
      background: rgba(0,0,0,0.2);
  }
  footer {
      position: absolute;
      left:0;
      right:0;
      bottom:0;
  }
  
  .footer ul {
      flex: left;
      margin: 0;
      padding: 0;
  }
  
  .footer li {
      display: inline;
  }
  .footer img {
      width:5%;
  }
  </code></pre>
  
  <p><code>position:absolute</code> isn't the answer. Or at least I couldn't make what I wanted with it.
  Right now the <code>footer</code> is overlapping <code>body</code> and <code>.bottom-container</code>.</p>
  
  <p>Changing <code>#container</code> from <code>position: absolute;</code> to <code>position: relative;</code> makes the sub-divs : <code>top-container</code>, <code>center-container</code>, <code>bottom-container</code> to move to the top of the window and be on top of each other.</p>
  
  <p>Is this achievable without JavaScript or jQuery ?</p>