html - 添加限制以修复侧边栏

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

在你的body标签中调用js函数

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