CSS高度占滿全屏是我們經常會遇到的需求之一，特別是在響應式設計中。本文將介紹如何讓你的網頁在不同設備上都能完美展現。

html, body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
box-sizing: border-box;
padding-bottom: 50px; /* footer高度，根據實際情況而定 */
}
.footer {
height: 50px;
}

首先，我們需要讓html和body標簽的高度都占滿整個屏幕。這個非常簡單，只需要在樣式表中加入以下代碼：

html, body {
height: 100%;
margin: 0;
padding: 0;
}

接下來是關鍵，我們需要使用一個包裹層，這個包裹層需要設定最小高度為100%。這樣，當網頁內容高度不足一屏時，這個包裹層會自動將高度拉伸到100%，如果網頁內容高度超過一屏，它的高度將自適應。同時，我們需要給這個包裹層加上box-sizing:border-box屬性，這樣能夠避免計算padding和border的影響。最后，我們也需要為包裹層底部留出一定高度，以便方便footer的定位。

.wrapper {
min-height: 100%;
box-sizing: border-box;
padding-bottom: 50px; /* footer高度，根據實際情況而定 */
}

最后，我們需要給footer定位，并設置它的高度即可：

.footer {
height: 50px;
}

至此，我們已經完成了本文的主題，讓你的網頁高度占滿全屏并保持兼容性。祝你使用愉快！