title: How to align div to bottom of the page, not bottom of the screen
body: <p>I want to align a div to the bottom of the PAGE, not to the bottom of the screen. When I do this:</p>
  
  <pre><code>#contact-block{
  position: absolute; 
      bottom: 0; left: 0; 
  }
  </code></pre>
  
  <p>, the div is placed in the bottom area of the screen. When my page is long, I have to scroll down and the div which should have been at the bottom, floats somewhere in the middle.</p>
  
  <p>There might be a simple solution to this, but I'm just not seeing it.</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;div id="left"&gt;
  &lt;div id="submenu"&gt; &lt;span class="menutitle"&gt;Services&lt;/span&gt;
    &lt;ul&gt; 
    &lt;/ul&gt;
   &lt;/div&gt;
  
   &lt;div id="contact-block"&gt;
   &lt;span class="contacttitle"&gt;Contact&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've also added a little image to illustrate what I mean:
  <img src="https://i.stack.imgur.com/03RL6.png" alt="enter image description here"></p>
  
  <p>The red div is the contact div.</p>
  
  <p><strong>Edit:
  I've found a solution with jQuery and CSS. This might not be the best solution, but hey, it works.</strong></p>
  
  <p>jQuery:</p>
  
  <pre><code>var offset= $(document).height()-$("#contact-block").height()- $("#footer").height()-60;
  $("#contact-block").css("top", offset);
  $("#contact-block").css("left", $("#wrapper").position().left);
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#contact-block {
  position : absolute;
  width:216px;
  height:100px;
  background:url(../img/contact-bg.jpg) repeat-x #5c5c5c;
  }
  </code></pre>