頁腳漂浮在底部，很好。但對於列

Question

我有代碼，例如：

<div id="container"> 
    <div id="left-column">Floating left.</div> 
    <div id="right-column">Floating right.</div> 
</div> 
<div id="footer">BlahBlah</div> 

容器允許我到頁腳推到頁面的底部，但是如果我想左，右列跨越的高度接觸頁腳，如何才能做到這一點？

Answer 1

您需要將頁面的html和body元素設置爲100％高度。然後，如果您還將它們設置爲100％，那麼您的列將填充頁面高度。

完整的CSS（包括你自己的）如下。背景顏色用於說明佈局。

html, body { 
    height:100%; 
    padding:0; 
} 

#container { 
    width:100%; 
    height:100%; 
    position:relative; 
} 

#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    background-color: #FC0; 
} 

#left-column { 
    background-color: #666; 
    width :50%; 
    float: left; 
    height: 100%; 
} 

#right-column { 
    background-color: #CCC; 
    width: 50%; 
    float: right; 
    height: 100%; 
} 

通過對身體刪除水平滾動頁面時設置空填充爲零。另外請注意，通過爲頁腳使用絕對定位，它將覆蓋內容列的內容。

以下是展示佈局的小提琴 - http://jsfiddle.net/BuKcH/