Добавить ограничение для исправления боковой панели

Question

Я создал исправленную боковую панель с меню в ней. Моя проблема заключается в том, что он перекрывает мой нижний колонтитул. Я хочу, чтобы он остановился перед нижним колонтитулом. Вот мои коды.

HTML

<div class="maincontent"> 
    main content here 
</div> 
    <div id="leftCol"> 
        <ul class="nav nav-stacked" id="sidebar"> 
         <li>menu1</li> 
         <li>menu2</li> 
        </ul> 
    </div> 

<footer id="mainfooter"></footer> 

для CSS

.affix-top,.affix{ 
    position: static; 
} 
@media (min-width: 979px) { 
    #sidebar.affix-top { 
    position: static; 
    margin-top:30px; 
    } 

    #sidebar.affix { 
    position: fixed; 
    top:70px; 
    } 
} 

#sidebar li.active { 
    border:0 #eee solid; 
    border-right-width:4px; 
} 
#page-wrap { 
    margin: 15px auto; 
    position: relative; 
} 

#sidebar { 
    position: fixed; 
    margin-left: 10px; 
} 

и JS

$('#sidebar').affix({ 
     offset: { 
     top: 245 
     } 
}); 

Любой ответ будет очень ценна из сообщества.

Answer 1

Вы можете добавить высоту с помощью jQuery в соответствии с размером окна на боковой панели.

В JS добавить

function setHeight(){ 
var winHeight = $(window).height(); 
$("#sidebar").css("height", winHeight - yourFooterHeight); 
} 

В CSS добавить

#sidebar{overflow:auto;} 

В теге вашего тела позвонить функции расслоение плотной

onresize="setHeight()" onload="setHeight()"