CSS：如何在CSS中获取屏幕高度？

Question

.visitcard-ipcashier {
    position: fixed;
    background: white;
    top: 0;
    right: 0;
    height: 95%;
    overflow: auto;
    z-index: 50;
}

在上面的代码中，我在93％中使用了高度高度。但这取决于屏幕。如何在CSS中获取屏幕高度？

Answer 1

您无法像使用JS那样将其“获取”视口高度，以将其存储在变量中，但是可以在calc()中使用它来更改元素的高度。例如，height: calc( 100vh - 50px );等于“窗口高度减去50像素”。

Answer 2

在这种情况下，建议您使用 vh （数百视口高度）： 如果您设置height: 100vh;，则每个屏幕的高度将为100％。

Code Example

Answer 3

您需要使用javascript来获取屏幕信息。

Answer 4

无法使用CSS，但是您可以使用媒体查询来控制页面设计。

或者，您可以使用screen.height获取屏幕高度，并使用screen.width获取屏幕宽度。 [它们是JS属性]

这是执行此操作的基本JS代码：

console.log("Width: "+screen.width+": Height: "+screen.height);