ブートストラップ3カラム内に固定された高さスクロール可能なdiv

Question

私は似たような質問を見ましたが、まったく同じようなものはありません。ほとんどの例では、col-md-2スクロール全体が作成されています。

流体容器の中には、左側のナビゲーションタイプの列と右側の内容の列があります。

左の列の中で、divは最上位class = "top"に、divは下位class = "bottom"にします。真ん中にはリストがあります。トップとボトムが100pxです。私はリストが2つの間のすべてのスペースを占めるようにしたい、リストの内容がこのエリアよりも大きい場合、それをスクロールしたい。リストの内容が2つの間のスペースよりも小さい場合は、そのスペースのすべてを占有したい（折りたたむのではなく）。ここで

は擬似例です：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-2"> 

      <div class="top"> 
       . . . 
      </div> 

      <div class="scroll-area"> 
       <ul> 
        <li>one</li> 
        . . . 
        <li>one-thousand</li> 
       </ul> 
      </div> 

      <div class="bottom"> 
       . . . 
      </div> 

     </div> 
     <div class="col-md-10 content"> 
     </div> 
    </div> 
    </div> 

    <style> 
    .top, .bottom { height: 100px; } 
    </style> 

私は「スクロールエリア」絶対位置を与えることで、ブートストラップなしの前にこれを行うことができました。私は、固定位置にスクロールエリアの作業を行うことができますが、含む「COL-MD-2が折りたたまれているので、 『底部』のトップをアップ座る。

どのように私はこの作業を行うことができますか？

Answer 1

この答えは、ウィンドウの高さを知らないときのためです。

position：absoluteを使用してもこれを達成できます。 あなたは青と赤の部分に上と下を取るように指示します。 緑色の部分は100pxになります。次に、css 'calc'を使ってその高さを取得します。

スタイル

.side{ 
    position:fixed; 
    top:0; 
    left:0; 
    height:100%; 
    padding:0; 
} 

.scroll-area{ 
    width:100%; 
    height:calc(100% - 200px); 
    margin-top:100px; 
    background-color:green; 
    float:left; 
    overflow-y:scroll; 
} 

HTML

<div class="row"> 
     <div class="col-md-2 col-xs-2 side"> 
      <div style="position:relative;width:100%;height:100%;"> 
      <div class="top" style="background-color:red;top:0;width:100%;height: 100px; position:absolute;"> 
       top 
      </div> 

      <div class="scroll-area"> 
       <ul> 
        <li>one</li> 
       </ul> 
       <div style="width:100%;height:10000px;"> 
       </div> 
       <ul> 
        <li>one-thousand</li> 
       </ul> 
      </div> 

      <div class="bottom" style="background-color:blue;bottom:0;width:100%;height: 100px; position:absolute;"> 
       bottom 
      </div> 
      </div> 

     </div> 
     <div class="col-md-10 col-xs-offset-2 content col-md-offset-2"> 
     <div style="height:1000px;width:100%;"> 

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

このfilddleを見てみましょう -

https://jsfiddle.net/jxo6pmju/12/

Answer 2

は、ここで私はあなたと、問題を抱えていた何のためにフィドルのリンクを追加しました。 希望このhelps`

<div class="fixed"> 
    <b>Fixed Content</b> 
    <br/> 
    <br/> 
    <p>top</p> 
</div> 
<div class="scrollit"> 
    <b>Scroll Content</b> 
    <br/> 
    <br/> 
    <ul> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    </ul> 


</div> 
<div class="fixed"> 
    <b>Fixed Content</b> 
    <br/> 
    <br/> bottom 
</div> 

scrollable middle section