CSS是網頁開發中不可或缺的一部分，它控制著頁面的樣式。其中一個重要的CSS屬性是height（高度），而當前屏幕的高度特別重要。在本文中，我們將探討如何在CSS中獲取當前屏幕的高度。

獲取當前屏幕的高度可以使用CSS中的自定義變量（CSS variables）和JavaScript（JS）的組合。我們可以在CSS中定義變量，然后使用JS獲取當前屏幕的高度并將它賦給CSS變量。接下來，我們將演示這個過程。

/* 在CSS中定義變量 */
:root {
--screen-height: 0; /* 初始化屏幕高度變量 */
}
/* 使用變量設置元素高度 */
.some-element {
height: var(--screen-height); /* 使用變量設置元素高度 */
}

在上面的代碼中，我們首先在:root（根元素）中定義了一個變量--screen-height，并將它初始化為0。接下來，在.some-element元素中，我們使用這個變量來設置元素的高度。由于變量的值為0，所以.some-element元素的高度也為0。

接下來，讓我們使用JavaScript獲取當前屏幕的高度，并將它賦給變量--screen-height。

/* 使用JS獲取當前屏幕的高度 */
const screenHeight = window.innerHeight || document.documentElement.clientHeight;
/* 將屏幕高度賦給CSS變量 */
document.documentElement.style.setProperty('--screen-height', screenHeight + 'px');

在上面的代碼中，我們使用JavaScript的window.innerHeight和document.documentElement.clientHeight屬性來獲取當前屏幕的高度。如果使用第一個屬性獲取不到當前屏幕的高度，則使用第二個屬性。接下來，我們將獲取到的屏幕高度值添加單位px，然后通過document.documentElement.style.setProperty()方法將它賦給--screen-height變量。

這樣，我們就成功地將JS獲取到的屏幕高度值賦給了CSS變量--screen-height，并使用它來設置元素的高度。如此一來，我們就可以在CSS中獲取當前屏幕的高度了。