Боковая панель Bootstrap с фиксированным нижним колонтитулом и прокручиваемым div

Как вы видите на картинке ниже, часть боковой панели, где у меня не работает прокручиваемый 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;
        }

person Nurzhan Nogerbek    schedule 05.05.2016    source источник


Ответы (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, который гарантирует, что фиксированный столбец получит ту же ширину, что и его родитель. Вы можете сделать то же самое для нижнего колонтитула.

Чтобы активировать полосу прокрутки, вы должны установить свойства top и bottom в соответствии с Имейте блок div с фиксированной позицией, который необходимо прокручивать, если содержимое выходит за пределы

person Bass Jobsen    schedule 20.05.2016