“height:100vh;”超出可阅读范围

vh:英文全称为 viewpoint height,视窗高度,1vh=视窗高度的1%;

看一下这个css代码:

下面是Chrome下的效果

当我们选择调整Chrome窗口,当窗口高度低于页面里固定内容高度时,头部内容被隐藏起来了!!!滚动条到最顶端依旧不能显示头部内容!

在尝试使用overflow-y: auto;后发现依旧不能显示;

下面调整代码:

height:100vh; 改为 min-height: calc(100vh );

接下来看效果图

在设置css高度时候,使用 min-height: calc(100vh ); 就解决这个头部内容影藏问题;

发表评论