Twitter Bootstrap - 100％Height

Question

twitter-bootstrapフレームワークを使用して自分のアプリケーション用の管理パネルを設計しようとしていますが、私のレイアウトがうまく動作しません。

私はこのデザインに触発された：それは2列レイアウト「サイドバー」と「メインコンテンツ」だろうが、私は100％の高さが仕事を得ることができない
。私はこのコードを使用して、100％の幅で2列のレイアウトを得ることができた：

HTML

<div class="container-fluid"> 
<div class="row-fluid"> 


    <div class="span2 colorize-white"> 
    <!--Sidebar content-->Sidebar 
    </div> 


    <div class="span10 colorize-white"> 
    <!--Body content-->Main 
    </div> 


</div> 
</div> 

CSS

/* Global */ 
html, body { 
    color: #6B787F; 
    padding: 0; 
    height: 100%; 
    background: #11161a; 
    font-family: 'PT Sans' !important; 
} 

.colorize-white { 
    background: #FFFFFF; 
} 

.no-margin { 
    margin: 0; 
} 

私はそこに半分の方法だが、私はできない二つのものがあります解決する。
1）100％の高さ
2）あなたは、私は、ブラウザの境界線とサイドバー/メイン要素と、2つの間のマージンの間のマージンを持っていることを見ることができる第二の画像の上に外側の余白の

を退治します。 bodyタグを貼り付けたHTMLのすべての要素に余白を付けないと、これを取り除く必要があります。まだ100％の高さが得られません。また、ブラウザの境界とサイドバーとメインコンテンツ間のマージンを取り除きますサイドバーとメインコンテンツの間のマージンスペースが消えます。

Answer 1

私はそれほど確かではありません。ブートストラップのグリッドモデルはあなたがここで探しているものです。代わりに、絶対的な位置を探しているかもしれません。例：ここでは

#sidebar, #content { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
} 
#sidebar { left: 0; width: 10em; } 
#content { left: 10em; right: 0; } 

Try it out.

Answer 2

私は、これはあなたが探しているものであれば、but here it goes.

がわずかにCSSを変更したことを確認していません。 margin:0;〜html, bodyタグ。

Answer 3

は、ブートストラップ3のために働く例..です

HTMLと体の両方が、100％の高さであることを確認します。サイドバーとコンテンツをラップし、サイドバーにposition:absoluteを使用します。

http://www.bootstrapzero.com/bootstrap-template/basis

コード：http://bootply.com/86704