如何獲得側邊欄來填滿空間？

使用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/

因此，我想補充這個問題。你如何使它適用於這種類型的設計？

來源

2013-03-29 clueless

退房人造列了一個快速簡便的黑客：http://alistapart.com/article/fauxcolumns基本上，你要創建一個在父div的背景，使列看起來延伸到最高的div的全高。 – nathancahill

這是一個有點棘手。我發現的唯一方法就是設置巨大的填充底部和相對的邊距來補償它。另外，你必須給#wrapoverflow: hidden：

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

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

來源

2013-03-29 17:31:14 dfsq

我已經在實際項目中嘗試了這一點，但它不起作用。不幸的是，我無法顯示實際的代碼。但是這已經指明瞭我正確的方向，因爲我實際上並沒有想到這種技術會在小提琴上演奏。我想這是我的樣式表造成的問題。無論如何，謝謝。 – clueless

可能是因爲我在我自己的項目中使用了這種技術，即使在IE中它也能正常工作。 – dfsq

哦，應該提到的是，這不適用於半透明設計明智的頁腳。如以下示例所示：http://jsfiddle.net/AfwzD/23/。不想問另外一個問題，所以我只編輯一個。 – clueless

你只能通過javascript來做到這一點。有點像這樣。

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

來源

2013-03-29 17:29:22

您需要清除浮動元素，以便將它們放回到頁面流中。

HTML

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

CSS

.clear { clear:both; }

來源

2013-03-29 17:29:32

如何獲得側邊欄來填滿空間？

回答

相關問題