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

当我们点击菜单时，会添加或删除.toggled类的一些angular.js。即使导航菜单向左滑动，如何将页脚保持在底部？

Answer 1

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

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

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

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

简单的粘性页脚

1 个答案: