通常固定定位是不具备占据位置的,如果想实现上下不滚动让中间滚动,可以在固定定位中再嵌套一层盒子设置一个固定高度即可
<div class="had">
<header class="header">
<h5>个人中心</h5>
</header>
.had{
height: 45px;
width: 100%;
}
.header {
width: 100%;
height: 45px;
line-height: 45px;
text-align: center;
position: fixed;
background-color: #fff;
z-index: 999;
}
这样滚动时就不会被遮挡了
让中间部分滚动,如果不确定高度用百分比效果也不是很明显,可以用vh总视口来减去需要除去的总高度。
height: calc(100vh - 95px);
overflow: auto;
可以这么换算
height:100vh == height:100%
但是当元素没有内容时候,设置height:100%,该元素不会被撑开,此时高度为0,
但是设置height:100vh,该元素会被撑开与屏幕高度一致。
总结:设置height:100vh,能够保证元素无论是否有没有内容,高度都等于屏幕高度。