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/

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

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

3 个答案: