溢出：滚动ui路由器ui-view

Question

我创建了我的index.html，我希望导航栏位于屏幕的底部。当加载的页面有很多内容时，我希望能够在内容加载的位置滚动，但让页面底部的导航栏始终停留在那里。

我的index.html

<div class="row wrapper"> 
    <div class="col-md-12 scrollable"> 
     <div ui-view></div> 
    </div> 
    <div class="push"></div> 
</div> 

<div class="row footer" id="footer"> 
    <div class="col-md-12"> 
     <ul class="nav nav-tabs" id="myTabs"> 
      <li><a ui-sref="home">Home</a></li> 
      <li><a ui-sref="about">About</a></li> 
      <li><a ui-sref="portfolio">Portfolio</a></li> 
      <li><a ui-sref="test">test</a></li> 
     </ul> 
    </div> 
</div> 

和我的CSS滚动类

.scrollable { 
    width: 100% 
    overflow: scroll; 
} 

Answer 1

如果您使用的引导，而不是把页脚，因为它在技术上只是一个导航这是在底部该页面，您可以使用粘性导航结构，如下所示：

.scrollable { 
    width: 100% 
    overflow-y: scroll; 
} 

....

<div class="row wrapper"> 
    <div class="col-md-12 scrollable"> 
     <div ui-view></div> 
    </div> 
    <div class="push"></div> 
</div> 
<nav class="navbar navbar-default navbar-fixed-bottom"> 
    <div class="col-md-12"> 
     <ul class="nav nav-tabs" id="myTabs"> 
      <li><a ui-sref="home">Home</a> 
      </li> 
      <li><a ui-sref="about">About</a> 
      </li> 
      <li><a ui-sref="portfolio">Portfolio</a> 
      </li> 
      <li><a ui-sref="test">test</a> 
      </li> 
     </ul> 
    </div> 
</nav>