为什么使用height: 100%不能占满屏幕

问题

我当时遇到一个问题

我的代码是

\

但是结果无法占满屏幕

然后我使用了vh

结果能占满

原因

100%和100vh的区别在于它们计算高度的方式不同：

• 100%：这个值是相对于父元素的。如果父元素的高度没有明确设置，那么100%可能不会占据整个屏幕高度。例如，如果父元素的高度是auto（默认值），那么100%的高度就是auto，即父元素的实际高度。
• 100vh：这个值是相对于视口（viewport）的高度。vh是视口高度的百分比单位，100vh表示占据整个视口的高度。无论父元素的高度如何，100vh都会占据整个屏幕的高度。

因此，如果你希望元素占据整个屏幕的高度，建议使用100vh。这样可以确保元素无论在什么情况下都能占据整个屏幕的高度，而不会受到父元素高度的影响。

还有一个,如果你的样式要写在style里 要覆盖element的样式不可以在style上添加scoped,这样也会导致不成功