css - 如何使div随body一起拉伸(stretch)？

Question

我一直在论坛中搜索以找到解决我面临的问题的方法，但找不到任何解决方案。所以我再次在这里寻求补救措施。

我有这个包含个人资料表格的页面。该表单包含在页面容器 div 中，并且很长，需要主滚动条才能看到隐藏的内容。页面底部有一个页 footer 分，其中显示版权声明。

我的问题是我找不到使我的页面容器 div 与 body 元素一起拉伸(stretch)的方法。我已经应用 height: inherit 到那个 div 但它仍然拒绝拉伸(stretch)以覆盖到页 footer 分的边界。现在，页脚和填充主体背景颜色的 div 之间有很大的差距。这是一个屏幕截图，可以更好地理解。

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

如有任何帮助，我们将不胜感激。

编辑 澄清一下，页 footer 分位于页面容器 div 内。这是我的 html - htm

Answer 1

尝试在所有表单元素之后添加一个清除元素作为页面容器中的最后一项。可以是 <br clear="all" />或样式为 clear:both 的 div .

更好的主意 - 删除 height: inherit;从你的 mcontainer 风格。这为我修复了它。