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;
}

至此，我们已经完成了本文的主题，让你的网页高度占满全屏并保持兼容性。祝你使用愉快！