我已经创建了我的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;
}
答案 0 :(得分:1)
如果您使用引导程序,而不是使用页脚,因为它在技术上只是页面底部的导航,您可以使用粘性导航结构,如下所示: / p>
.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>