ブートストラップ3.0完全長ボディサイドバー

Question

私はブートストラップdivsを全身の長さにしようとしています。

これは私がこれまで試したものです：http://jsfiddle.net/bKsad/315/

html, body { 
    min-height: 100% 
} 
.wrap { 
    height: 100% 
} 
.sidebar { 
    background-color:#eee; 
    background-repeat: repeat; 
    padding:0; 
    min-height:100% !important; 
    position:relative; 
} 
.sidebar .sidebar-content { 
    height:100%; 
    width:100%; 
    padding: 5px; 
    margin:0; 
    position:relative; 
} 

右の列が長く成長するにつれて、私はサイドバーが同じことをやりたいです。

Answer 1

アプローチ1：ラップdivの最後にstyle = "clear：both"という空のdivが追加されました。 http://jsfiddle.net/34Fc5/1/

approch 2：http://jsfiddle.net/34Fc5/：

html, body { 
    height: 100%; 
} 
.wrap { 
    height: 100%; 
    overflow: hidden; 
} 
.sidebar { 
    background-color:#eee; 
    background-repeat: repeat; 
    padding:0; 
    height:100% !important; 
    position:relative; 

} 
.sidebar .sidebar-content { 
    height:100%; 
    width:100%; 
    padding: 5px; 
    margin:0; 
    position:relative; 
} 

"がオーバーフロー：隠された;" を追加100％のHTMLに、本体 変更高さ： 変更高.wrapするCSSの方法を使用して

を.sidebar 100％を、サイドバーの高さは、ブラウザのビューポートに一致します。したがって、アプローチ1を見ると、スクロールするときにビューポートでバックグラウンドが停止することに気づくでしょう。それを修正するためにはjsが必要です。

Answer 2

キーは "COL-MD-X" を理解することで、ブートストラップ3が提供する "COL-MD-オフセット-X" のスタイル：

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-md-3 sidebar"> 
    Sidebar Content 
    </div> 
    <div class="col-md-9 col-md-offset-3 content"> 
    Main Content 
    </div> 
</div> 
</div> 

次にブレークポイントを確認するためにCSSを使用してライン - アップ。あなたは、特定のニーズのためのパディング/マージンを微調整する必要がありますが、オフセットと@mediaブレークポイントはかなりよく全体的なレイアウトを扱う：

html, body, .container-fluid, .row { 
    height: 100%; 
} 

.sidebar { 
    background-color: #CCCCCC; 
} 

@media (min-width: 992px) { 
    .sidebar { 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    z-index: 1000; 
    display: block; 
    background-color: #CCCCCC; 
    } 
} 

作業溶液：

あなたが使用している場合http://www.bootply.com/111837「COLを-sm-x "または" col-lg-x "の場合、@media CSSを対応する最小幅（smの場合は768px、lgの場合は1200px）に変更するだけです。ブートストラップが残りの部分を処理します。

Answer 3

（すべてをしようと多くの時間後）、それは私のために働いてしまった唯一のものは、CSS padding-bottom: 100%;

%でパディングが私のためにそれをやった

HTML <nav class="col-sm-3 sidebar">

ました。今、それはページの一番下まで行きます。

Answer 4

これは、絶対配置されたdivとjQueryのビットを使用してこれを解決しました。私は50pxの固定された高さを持つBootstrap navbarを持っています。そのため、あなたはコード内に50を見ています。一番上のナビゲーションバーがない場合は、これを削除できます。

このソリューションは、任意の高さで動的に動作します。

CSS：

.sidebar { 
    background-color: #333333; 
    position: absolute; 
    min-height: calc(100% - 50px); 
} 

のjQuery：

var document_height = $(document).height(); 
var sidebar = $('.sidebar'); 
var sidebar_height = sidebar.height(); 

if (document_height > sidebar_height) { 
    sidebar.css('height', document_height - 50); 
} 

このことについてきちんとした事はそう、そのは、最小の高さを調整するためにCSSを使用しているため、背景のちらつきが生じないです通常、jQueryのサイズ変更によってバックグラウンドのちらつきが発生すると、ページの読み込み時に非表示になります。