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属性

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

1 个答案: