javascript - 你如何让侧边栏填满空间？

Question

使用 this粘性页脚技术并提供this示例。

* { margin:0; }
html, body { height:100%; }
#wrap { 
    min-height:100%;
    height:auto !important;
    height:100%;
    margin:0 0 -47px;
}
#side { float:left; background:#ccc; width:100px; overflow:hidden; }
#body { float:left; background:#aaa; width:300px; }
#foot, .push { height:47px; }
#foot { background:#eee; }

如何让侧边栏和/或内容框填满页眉和页脚之间的空间？

我已经尝试将高度设置为 100%，但它(不足为奇)似乎并不适用。而且我无法设置固定高度，因为它在更大的屏幕上仍然会中断。

有人想阐明这一点吗？

编辑:针对此问题选择的答案不适用于具有半透明页脚的设计。在这里显示:http://jsfiddle.net/AfwzD/23/

因此，我想将此添加到问题中。您如何让它适用于此类设计？

Answer 1

这有点棘手。我发现唯一的一种方法是设置巨大的底部填充和相反的边距来补偿它。另外你必须给 #wrap overflow: hidden:

#body {
    ...
    padding: 80px 20px 1050px;
    margin-bottom: -1000px;
}

演示:http://jsfiddle.net/AfwzD/21/