内容区一设置固定高度,内容区二设置100vh,当内容高度大于视图的时候就会有滚动条。滚动条拉到底的时候就出现了问题,如下图所示:
内容区二的内容没有完全显示出来,原因如下图所示:
视图高度100vh为左边的实际高度,而设置内容二区域100vh后,它的实际高度为右边的100vh,但屏幕高度不够了,所以内容被遮住了。被遮住内容的宽度和内容区一的高度相等。
那如何解决这个问题呢?将内容区二的高度设置为92vh,就是不那么高,就可以把内容二的内容全部显示出来了。效果如下图所示:
全屏的时候也一样可以展示全部:
另一个用到的地方是登录页,宽度设置100vw,高度设置100vh,这样登录页就不会出现滚动条了。