固定フッタとスクロール可能なdivを持つブートストラップのサイドバー

Question

下の図のように、スクロール可能なTreeViewが動作していないサイドバーの部分からもわかるように、このサイドバーにはユーザがスクロールしたときに移動しない固定フッターが必要ですサイドバー。それを修正するには？

私は次の構造をしたいです。

.htmlを

<div class="container-fluid max-height no-overflow"> 
     <div class ="row max-height"> 
      <form runat="server"> 
        <!--SIDEBAR--> 
        <div class="col-sm-3 sidebar"> 

         <div class="panel-body scrollable"> 
          TREEVIEW HERE 
         </div> 

         <div class="panel-footer center-block"> 
          BUTTON HERE 
         </div> 
        </div> 

       <!--MAIN CONTENT--> 
       <div class="col-sm-offset-3 main scrollable"> 
        MAIN CONTENT HERE 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

CSS：

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

     } 
     .no-overflow { 
      overflow: hidden; 
     } 
     .sidebar { 
      display: none; 
     } 
     @media (min-width: 768px) { 
      .sidebar { 
       position: fixed; 
       bottom: 0; 
       left: 0; 
       z-index: 1000; 
       display: block; 
       overflow-x: auto; 
       overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ 
       background-color: #f5f5f5; 
      } 
     } 
     .main { 
      padding-top: 20px; 

     } 
     @media (min-width: 768px) { 
      .main { 
       padding-right: 20px; 
       padding-left: 20px; 

      } 
     } 
     .panel-body{ 
      overflow: auto; 
     } 
     .panel-footer{ 
      background-color:#ff6a00; 
     } 

Answer 1

次のHTMLコードを使用することができます。

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-3"> 
     <div style="position:fixed; top:0; bottom:40px; overflow-y:scroll; float:none; width:inherit;"> 
     <footer style="position:fixed; bottom: 0; height:40px; background-color:red;">footer</footer>   
     </div> 
    </div> 
    <div class="col-xs-9"> 
    </div>   
    </div>  
</div> 

のTh e左辺とそのフッターの両方がposition: fixedになるwidth: inheritは、固定列がその親と同じ幅になることを保証します。フッターにも同じことができます。あなたはHave a fixed position div that needs to scroll if content overflows

に応じて両方 topと bottomプロパティを設定する必要がありますアクティブなスクロールバーへ