css全屏以后vh失效

在Web开发中，使用CSS来实现全屏布局是非常常见的。不过，有些开发者可能会在全屏使用了CSS之后发现，原本设定vh（视口高度）的样式属性不再起作用了。

这是因为当使用CSS全屏时，浏览器会把浏览器窗口的尺寸缩放为与视口大小相同。因此，vh属性不再是相对于视口高度而是相对于缩放后的窗口高度了。

为了解决这个问题，我们需要使用一些其他的CSS技巧来定义高度。以下是两个可行的做法：

/*方法一：使用calc()函数*/height: calc(100vh - 100px);
/*方法二：使用100%*/html, body {
      height: 100%;
}
.element {
      height: 100%;
}
    

方法一中的calc()函数可以实现基于视口高度进行计算的效果。在减去一定像素的高度后，就可以实现占满整个屏幕的效果。

方法二则是使用了百分比来定义高度。在body和html元素中都设定为100%的高度后，再在需要全屏显示的元素中同样使用100%的高度来实现全屏效果。

总体来说，我们可以使用多种方法来实现CSS全屏效果。但是在进行设计时，需要注意到vh属性失效的可能性，并做好相应的调整，以确保页面表现既美观又合理。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！