Question

我一直在通过论坛搜索找到我遇到的问题的解决方案，找不到任何问题。所以我再次要求补救。

我的问题是我无法找到一种方法让我的页面容器div与body元素一起拉伸。我已应用高度：继承到该div但仍然拒绝伸展，以便覆盖到页脚部分的边界。现在，页脚和充满身体背景颜色的div之间存在很大差距。这是一个更好理解的屏幕截图。

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

任何帮助都将不胜感激。

编辑为了澄清，页脚部分是页面内容容器div。这是我的html - htm

Answer 1

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

更好的主意 - 从您的mcontainer样式中删除height: inherit;。这为我修好了。

Answer 2

尝试使用overflow：hidden;在div.mcontainer。

Answer 3

尝试将html添加到高度：

html, body {
    height: 100%;
}

在A List Apart上讨论：http://www.alistapart.com/articles/footers/

Answer 4

如果容器中有浮动元素，请尝试将clear-both-div放在容器div的末尾：

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

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

</div>

Answer 5

我遇到了同样的问题，现在我正在使用java脚本（jQuery）来解决它。

在我的情况下，它是菜单栏的div，我计算了主容器的高度加上标题的高度。

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

现在，使用身体的高度似乎更有意义：

$("body").height()

如果有没有javascript的版本，那么知道它会很有趣。但同时这可能是一种解决方法。

Answer 6

也许您应该尝试将clear: both添加到页脚类

如何使div与身体一起伸展？

6 个答案: