带有简单侧边栏的粘性页脚

Question

我有一台sidebar I'm using from startbootstrap。我正尝试在页面底部添加一个粘性页脚。但是，当我切换导航栏时，页脚会跳到顶部。

<div id="wrapper" ng-class="{'toggled': hidden }">
  <div ng-include='"views/nav.html"'></div>
  <div id="page-content-wrapper">
    <div class="container-fluid">
      <div class="row" id='main-body'>
        <div class="col-lg-12">
          <div ui-view=''></div>
        </div>
      </div>

      <footer id='sticky-footer'>
        <p class='text-muted'>The source for this website is <a href='http://github.com/jasonshark/jasonshark.github.io'>available on Github</a></p>
      </footer>
    </div>
</div>

其中nav.html看起来像：

<div id="sidebar-wrapper">
    <ul class="sidebar-nav">
        <li class="sidebar-brand"><a href="/">Connor Leech</a></li>
        <li><a href='/'>Home</a></li>
        <li><a ui-sref='resume'>Resume</a></li>
        <li><a ui-sref='portfolio'>Portfolio</a></li>
        <li><a ui-sref='timeline'>Timeline</a></li>
    </ul>
</div>

<button class='btn btn-default btn-lg inverse' ng-click='hideMenu()'>
    <span class='glyphicon glyphicon-align-justify'></span>
</button>

我添加了这些样式来将页脚移到底部：

#sticky-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

以下是切换侧边栏的样式：

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 250px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}

当我们单击菜单时，有一小段angular.js可以添加或删除.toggled类。即使在导航菜单向左滑动的情况下，如何才能使页脚停留在底部？

Answer 1

对粘性脚注使用固定位置，而不是绝对，我没有加载您的代码，但可能就是这样。

摘自http://www.w3schools.com/css/css_positioning.asp

固定位置:具有固定位置的元素相对于浏览器窗口进行定位。

绝对定位:绝对位置元素相对于具有非静态位置的第一个父元素进行定位。如果找不到这样的元素，则包含块为：