为div来扩展全高

有一种方法,我可以用一个div来扩展到全高? 我也有一个粘性的页脚。

这是网页: 网站被删除 。 我所说的中间位是白色div,midcontent有CSS值:

.midcontent{ width:85%; margin:0 auto; padding:10px 20px; padding-top:0; background-color:#FFF; overflow:hidden; min-height:100%; max-width:968px; height:100%; } 

所以是的,显然height:100%没有工作。 另外,所有父容器都有高度设置。

这是一般的结构

 <body> <div id="wrap"> <div id="main"> <div class="headout"> <div class="headimg"></div> </div> <div class="midcontainer"></div> </div> </div> <div id="footer"> <div class="footer"></div> </div> 

你记得在你的CSS中设置html和body标签的高度吗? 这通常是我得到DIV延伸到全高:

<html> <head> <style type="text/css"> html,body { height: 100%; margin: 0px; padding: 0px; } #full { background: #0f0; height: 100% } </style> </head> <body> <div id="full"> </div> </body> </html>
<html> <head> <style type="text/css"> html,body { height: 100%; margin: 0px; padding: 0px; } #full { background: #0f0; height: 100% } </style> </head> <body> <div id="full"> </div> </body> </html> 

这可能有一些帮助: http : //www.webmasterworld.com/forum83/200.htm

相关报价:

大多数尝试完成这个是通过赋值属性和值来完成的:div {height:100%} – 这本身是行不通的。 原因是,如果没有父级定义的高度,div {height:100%;}没有任何因素可以达到100%的百分比,并且默认值为div {height:auto;} – auto是一个“根据需要的值“这是由实际的内容,这样的div {height:100%}将只有内容的要求延伸。

问题的解决scheme是通过为父容器(在本例中为body元素)指定高度值来find的。 写你的身体stlye包括高度100%提供所需的价值。

 html, body { margin:0; padding:0; height:100%; } 

如果由于某种原因某个元素被渲染的高度超过了HTML或body的高度,我会使用jQuery来使这个区域变大。

 <script type="text/javascript"> $($('#full').height($('#main').height())); </script>