title: Making a DIV expand with content as opposed to scroll
body: <p>Hey I am developing a website and I have hit a problem early on I added overflow:auto; to all of my main classes .header .content .footer because I was having a few background and ribbon errors which it cleaned right up.</p>
  
  <p>However I have recently discovered that because of this attribute the .content class when it has enough content scrolls instead of continuing to expand (I have tried height:auto; and height:100%;) if I disable overflow:auto; the content continues to on top of my .footer and my ribbons and backgrounds also mess up.</p>
  
  <p>I am not sure if I can force the div to expand or if I have to rework all my CSS?</p>
  
  <p>It is not a huge problem and the webpage remains functional with scrolling but surely there is a work around.</p>
  
  <p>}</p>
  
  <pre><code>.Header
  {
  width:  100%;
  overflow: auto;
  padding-top: 80px;
  background: rgb(45, 55, 60);
  }
  
  .Content
  {
  width:  100%;
  overflow: auto;
  padding-top: 50px;
  background: rgb(255, 250, 240);
  }
  
   .Footer
  {
  width:  100%;
  overflow: auto;
  padding-top: 30px;
  background: rgb(250, 250, 250);
  }
  </code></pre>
  
  <p>It could also be then content I suppose but I am really at a loss have been searching for past 4 hours thought it might be wise to post.</p>