CSS粘滞页脚，但与内部包装？

Question

通常当我使用粘脚，它在公园散步，但这次页面的设计略有不同，它要求有两个内部包装：

一个包装用于传统意义上，但其他需要坐在里面，并采取包装的全高，但有不同的宽度。

我已经做了以下的jsfiddle进一步解释......

http://jsfiddle.net/Ak9B4/1/

Answer 1

您可以使用jQuery做，如果你喜欢：

$(document).ready(function() { 
    var height = $('#wrap').height(); 
    $('#main').height(height); 
}); 

而且，这将是更好的，如果您从页脚中删除margin-top: -150px;。

Answer 2

为了让白盒一路跨越到页脚，改变min-height: 100%到height: 100%的#wrap元素，并添加height: 100%到#main元素。

小提琴：http://jsfiddle.net/blineberry/Ak9B4/3/

从#footer元素中取出margin-top: -150px保持页脚底部。这种方法的缺点是页面高度始终为100％+ 150px，因为#main元素为100％高+ 150px填充以防止页脚覆盖内容。 更新提琴：http://jsfiddle.net/blineberry/Ak9B4/4/

您可以通过一些富有创意的流体人造色谱柱来防止额外的高度。这一个是通过伪元素：http://jsfiddle.net/blineberry/Ak9B4/5/

Answer 3

使外部div有style =“width：100％; text-align：center;”而内部div有style =“width：400px; margin：auto;”它会居中。