溢出：滾動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>