你如何讓側邊欄填滿空間？

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

這有點棘手。 我找到的唯一一種方法就是設置巨大的填充底部和相對的邊距來補償它。 另外你必須給#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; }