在Web開發中，經常需要計算屏幕的可視高度。這個高度是指頁面在當前瀏覽器窗口內可見的高度，而不是整個頁面的高度。通過CSS可以輕松地計算出這個高度，下面就讓我們來看一下CSS如何計算屏幕的可視高度。

html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
/* 計算可視高度 */
min-height: calc(100vh - (80px + 50px));
background-color: #f8f8f8;
}

如上代碼所示，我們首先按照慣例把html和body的高度都設置為100%。接著，我們把body的display屬性設置為flex，并將它的flex-direction屬性設置為column，這樣可以讓整個頁面鋪滿整個瀏覽器窗口。最后，我們來到了關鍵部分main { min-height: calc(100vh - (80px + 50px)); }。它的作用是把main元素的最小高度設置為當前瀏覽器窗口的可視高度減去80px加50px。這樣的話，當瀏覽器窗口大小改變時，main元素的高度也會跟著變化，從而保證整個頁面的可視區域始終鋪滿瀏覽器窗口。

綜上所述，我們可以看出，利用CSS計算屏幕的可視高度非常簡單，只需要少量的CSS代碼就可以輕松地實現。當然，如果您需要更靈活的方式來計算屏幕的可視高度，也可以通過JavaScript等前端技術來實現。