带有固定页脚和可滚动 div 的 Bootstrap 侧边栏答案

【问题标题】：Bootstrap`s sidebar with fixed footer and scrollable div带有固定页脚和可滚动 div 的 Bootstrap 侧边栏
【发布时间】：2016-08-31 08:17:29
【问题描述】：

正如您从下面的图片中看到的，我可以滚动的 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;
        }

【问题讨论】：

标签： jquery html css twitter-bootstrap bootstrap-4

【解决方案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 属性

【讨论】：