Bootstrap的边栏与固定页脚和可滚动div [英] Bootstrap`s sidebar with fixed footer and scrollable div

问题描述

正如你从下面的图片中看到的那样，我有可滚动的TreeView的侧边栏部分没有工作，我也需要固定页脚到这个侧边栏，当用户滚动侧边栏时它不会移动。如何解决它？

As you see from the picture below the part of sidebar where I have scrollable TreeView didnt work, also I need to have fixed footer to this sidebar that doesn't move when user scroll the sidebar. How to fix it?

我想要有下一个结构。

I want to have next structure.

.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：

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;
        }

推荐答案

您可以使用以下HTML code：

You can use the following HTML code:

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

左侧和底部都获得位置：fixed 注意 width：inherit ，它保证固定列的宽度与其父类相同。您可以对页脚执行相同的操作。

The left side and its footer both get a position: fixed Notice the width: inherit which guarantees that the fixed column gets the same width as its parent. You can do the same for the footer.

要激活滚动条，您应该设置顶部和 bottom 属性根据有一个固定的位置div，如果内容溢出需要滚动

To active the scroll bar you should set both the top and bottom properties according to Have a fixed position div that needs to scroll if content overflows

这篇关于Bootstrap的边栏与固定页脚和可滚动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！