How to make div stretch along with body?

Question

Hi folks, 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.

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.

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.

screencap

/*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;  
}  

Any help would be appreciated.

EDIT Just to clarify, Footer section is inside page container div. Here my html - htm

Answer 1

Try to use overflow: hidden; on div.mcontainer.

Answer 2

try adding html to the height to:

html, body {
    height: 100%;
}

as discussed on A List Apart: http://www.alistapart.com/articles/footers/

Answer 3

Try adding a clearing element as the last item in your page container, after all the form elements. Could be <br clear="all" /> or a div with style clear:both.

A better idea - remove the height: inherit; from your mcontainer style. This fixed it for me.

Answer 4

If you have floating elements in your container, try placing clear-both-div at the end of the container div:

<div id="mcontainer">
    ...code

    <div style="clear:both;"></div>

</div>

Answer 5

I had the same problem, now I am using java script (jQuery) to solve it.

In my case it was the div for the menu bar and I calculated the height from the main container plus the height from the header.

$(document).ready(function(){
    var h = $(".main").height() + $(".main").position().top
    $(".lmenu").css({height:h+"px"})
    $(".rmenu").css({height:h+"px"})
});

Right now it seems to make more sense to use the height of the body:

$("body").height()

If there is a version without javascript, it would be interesting to know. But meanwhile this could be a workaround.

Answer 6

Maybe you should try adding: clear: both to footer class