1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 让css固定定位占据其位置

让css固定定位占据其位置

时间:2020-11-23 19:22:48

相关推荐

让css固定定位占据其位置

通常固定定位是不具备占据位置的,如果想实现上下不滚动让中间滚动,可以在固定定位中再嵌套一层盒子设置一个固定高度即可

<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,能够保证元素无论是否有没有内容,高度都等于屏幕高度。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。