gpt4 book ai didi

css - 溢出 : scroll on ui-router ui-view

转载 作者:行者123 更新时间:2023-11-28 17:08:55 25 4
gpt4 key购买 nike

我已经创建了 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;
}

最佳答案

如果您使用 Bootstrap 而不是放置页脚,因为技术上它只是页面底部的导航,您可以像这样使用粘性导航结构:

.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>

关于css - 溢出 : scroll on ui-router ui-view,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29657009/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com