青写真のページの高さを広げるには？

Question

blueprint.cssを使用して、<div>をページの高さまで引き伸ばす方法はありますか？私は純粋なCSSでそれを行う方法を知っていますが、私が見つけたものは青写真でそれを行う方法を示唆していないので、私は<div>のページの途中で停止するバックグラウンドを持っています（恐ろしく見えます）。

Answer 1

このためのBlueprintクラスはなく、必要なCSSがプロジェクトに表示されないことを簡単なgrepが示します。

コンパスは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]-->