title: How to make div stretch along with body?
body: <p>I've been searching through forums to find a solution for the problem I'm facing and couldn't find any. So here I am, again, asking for remedy.</p>
  
  <p>I have this page which encase personal profile form. That form is enclosed in page container div and is quite long that it requires main scrollbar in order to see those hidden. And there's a footer section at the bottom of the page where copyright statements are displayed. </p>
  
  <p>My problem is I can't find a way to make my page container div to stretch along with the body element. I've applied height: inherit to that div but still it refused to stretch so that it covers till the border of the footer section. Now, there is big gap between the footer and that div filled with body background color. Here's a screencap for better understanding. </p>
  
  <p><a href="http://www.imagebam.com/image/73a76369867816" rel="nofollow noreferrer">screencap</a></p>
  
  <pre><code>/*Form container*/  
  #form_container{   
   width: 600px;  
   background-color:#FDAE80;  
   margin-top: 15px;  
   margin-left: 110px;  
   padding-top: 10px;  
   padding-left: 20px;  
   padding-right: 20px;  
   padding-bottom: 10px;  
  }  
  
  body{   
   margin-top: 0px;  
   margin-bottom: 0px;  
   height: 100%;   
   background-color: #683468;    
  }  
  
  /*Page Container*/  
  div.mcontainer{   
   width: 1032px;  
   height: inherit;  
   background-color: #ffffff;  
  }  
  
  /*Footer Section*/  
  div.footer{  
   width: 1032px;  
   height: 80px;  
   border-top: 1px solid #683468;  
   margin-top: 10px;  
   text-align: center;  
   font-family: Arial;  
   font-size: 12px;  
   color: red;  
   position: relative;  
   bottom: 0px;  
   background-color:black;  
  }  
  </code></pre>
  
  <p>Any help would be appreciated.</p>
  
  <p><em>EDIT</em> Just to clarify, Footer section is inside page container div. Here my html - <a href="http://pastebin.com/BK8ir3Vf" rel="nofollow noreferrer">htm</a></p>