如何在藍圖中擴展頁面的高度？

Question

使用blueprint.css，有沒有辦法將<div>拉伸到頁面的高度？我知道如何在純CSS中做到這一點，但是我沒有發現任何建議如何用藍圖實現，所以我剩下一個<div>，其背景在頁面中途停下（看起來很糟糕）。

Answer 1

這裏沒有一個Blueprint類，而且一個快速的grep會顯示必要的CSS不會顯示在項目中。

羅盤用一組stretch mixins處理它。 stretch-y增加了以下CSS的元素：

bottom: 0; 
position: absolute; 
top: 0; 

由於絕對定位的元素不浮動互動，你需要與你想要的background-color和適當width一個div一個 （即給它正確的跨度 - ＃類）。

純粹的表現div感覺像是一個黑客，但我喜歡它比Faux Column方法更好。

您可能要包括：

html, body { 
    height: 100%; 
} 

，併爲您的容器下面，給它100％的高度，因此div的絕對定位發生在它的內部：

min-height: 100%; 
height: auto !important; 
height: 100%; 
position: relative; 

和甚至這個IE hack，儘管它可能只需要與一個腳註：

<!--[if !IE 7]> 
    <style type="text/css"> 
     #wrap {display:table;height:100%} 
    </style> 
<![endif]-->