Twitterのブートストラップ - スクロール可能なサイドバーを含む固定レイアウト

私は、単純なヘッダー+ 2つの列レイアウトを実装しようとしています。Twitterのブートストラップ - スクロール可能なサイドバーを含む固定レイアウト

私は100％幅の固定ヘッダーを持っていますが、現在、独立したスクロールバーを持つ2つの固定幅のフルハイト列を使用しようとしています。これをTwitterのブートストラップで行う良い方法はありますか？ここで

は私が Layout

出典

2012-04-03 Rand

ヘッダーは正常に動作します（navbar-fixed-top）列の場合は、行と2つのスパンを持つコンテナを使用します*。コンテナと行はオーバーフローしています：隠され、高さ：100％、スパンはオーバーフローしています：自動 – Rand

はレイアウトを意味します。 –

私は以前のコメントを編集しました。私は偶然、enterを押しました – Rand

私はそれを行うための方法を見つけを構築しようとしていレイアウトの写真です。わからないことが一番ですが、それはトリックを行います。あなたのターゲットのdivに

<html> 

<head> 

    <link rel="stylesheet" media="screen" href="normalize.css"> 
    <link rel="stylesheet" media="screen" href="bootstrap.min.css"> 

    <style type="text/css"> 
      body, html { 
       height: 100%; 
       overflow: hidden; 
      } 

      .navbar-inner { 
       height: 40px; 
      } 

      .scrollable { 
       height: 100%; 
       overflow: auto; 
      } 

      .max-height { 
       height: 100%; 
      } 

      .no-overflow { 
       overflow: hidden; 
      } 

      .pad40-top { 
       padding-top: 40px; 
      } 
    </style> 
</head> 

<body> 

    <div class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       header contents 
      </div> 
     </div> 
    </div> 

    <div class="container max-height no-overflow"> 
     <div class="row max-height"> 

      <div class="span8 scrollable"> 
       <div class="pad40-top"> 
        main contents 
       </div> 
      </div> 

      <div class="span4 scrollable"> 
       <div class="pad40-top"> 
        right sidebar contents 
       </div> 
      </div> 

     </div> 
    </div> 
</body>

http://jsfiddle.net/m4eS4/7/

出典

2012-04-04 14:51:50 Rand

あなたのコードからjsfiddleを作りました。http://jsfiddle.net/m4eS4/3/ –

fixed http://jsfiddle.net/m4eS4/7/ –

@lenzai ..あなたは、フィドルが期待通りに動いていると確信していますか？私は右のサイドバーが表示されません。ありがとう。 –

使用ブートストラップの「事前にスクロール」クラスを。 divを固定された最大高さに設定します。その美的にも優れています。

出典

2013-08-07 15:17:26

私はこれを「井戸」で使用しましたが、それは私がうまく必要としていた効果を作りました。上記の質問のように思えますが、はるかに単純です。 – Watson

スクロール前のクラスを見つけたリファレンス/リンクを持っているといいでしょう – GlennG

Twitterのブートストラップ - スクロール可能なサイドバーを含む固定レイアウト

答えて

関連する問題