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

Question

将这种技术用于粘性页脚并给出这个例子。

* { 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

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

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

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

Answer 2

你只能通过javascript来做到这一点。有点像这样。

window.addEventListener("resize", function ()
{
    /*var nContentHeight = window.innerHeight - headerHeight - footerHeight;*/
});

Answer 3

您需要清除浮动元素，以便将它们放回页面流中。

HTML

<div id="side">...</div>
<div id="body">...</div>
<div class="clear"></div>

CSS

.clear { clear:both; }