jquery - Bootstrap 的侧边栏带有固定页脚和可滚动 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>  

左侧及其页脚都获得一个 position:fixed 请注意 width:inherit 它保证固定列获得与其父级相同的宽度。您可以对页脚执行相同的操作。

要激活滚动条，您应该根据 Have a fixed position div that needs to scroll if content overflows 设置 top 和 bottom 属性。