1、父容器
.parent
{
overflow: hidden;
display: flex;
flex-direction: column;
height:100vh;
}
2、头部导航栏
.navigation
{
z-index: 999;
width: 100%;
height: 100rpx;
box-sizing: border-box;
position: fixed;
top: 0rpx;
left: 0rpx;
}
3、内容
.content
{
margin-top:100rpx; /*跟头部导航栏的高度一致,为的是内容不被头部导航栏盖住*/
overflow-y: auto; /*或者overflow-y: scroll;*/
flex:1; /*占满剩余高度*/
}
最后
以上就是健壮小伙最近收集整理的关于自定义头部导航栏的页面,让滚动条只在内容部分,而不是整个页面的全部内容,更多相关自定义头部导航栏内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复