title: css align footer bottom without using position:absolute
body: <p>I have a website made of "pages" (100% height on visible area). Please look at the following css:</p>
  
  <pre><code>html {
  height: 100%;
  }
  
  body{
  height:100%;
  margin: 0 auto;
  }
  
  .page{
  height: 100%;
  margin: 0 auto;
  min-height: 700px;
  min-width: 1024px;
  }
  
  .content {
  margin: 0 auto; 
  text-align: center; 
  height: 100%;
  min-height: 800px;
  min-width: 1024px;
  }
  
  .footer {
  width: 100%;
  min-height: 200px;
  background-color:red;
  }
  
   .hidden{
  width: 100%;
  height: 500px;
  background-color:blue;
     }
  
  .image {
  display:block;
  height: 100px;
  width: 100px;
  }
  </code></pre>
  
  <p>And this is the code:</p>
  
  <pre><code>  &lt;div class="page"&gt;
       &lt;div class="content"&gt;
  
          &lt;img class="image" src="img/image.png1"&gt; 
          &lt;img class="image" src="img/image.png2"&gt; 
          &lt;img class="image" src="img/image.png3"&gt;   
  
          &lt;div class="hidden" style="visibility:hidden"&gt;
          &lt;/div&gt;
  
       &lt;/div&gt;
  
       &lt;div class="footer"&gt;
       &lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>I need:<br><br>
  1) the footer to be aligned bottom when the page loads<br>
  2) after some seconds, with javascript I show the hidden div, and the footer must slide down. </p>
  
  <p>I can't obtain these two things at the same time, because I can obtain 1) with</p>
  
  <pre><code>footer {
      position: absolute;
      bottom: 0;
  }
  </code></pre>
  
  <p>but in this way when I show the hidden div it overlaps the footer.
  Otherwise if I remove this last code, when the hidden div appears the footer slides down correctly, but when I load the page the footer is not at the bottom.
  Does someone have any advice?</p>