現在的手機是人類的得力工具，它能給我們帶來很多方便，也支持人們隨時隨地都能接收到消息。那么，如果你需要在你的手機上面訪問一個網站，你是否會在為如何合理的適配各種型號、各種尺寸的手機而發愁呢？

這時候，CSS高度自適應就派上用場了。經過高度自適應之后，不同尺寸的手機用戶訪問同一個網站時網站在手機上的顯示效果可以得到保證。

html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
}
.main {
min-height: calc(100% - 60px);
height: auto !important;
height: 100%;
margin-bottom: -60px;
}
.footer {
height: 60px;
}

在上述例子中，我們對html、body以及wrapper這幾個元素設置總高度為100%，并且把main的高度設置為100%。這就允許了不同尺寸的手機用戶訪問同一個網站時網站在手機上的顯示效果可以得到充分的保證。

需要注意的一點是，若主區域內容的高度超過設定的最小高度，內容區塊會自動伸長以適應內容高度。這個操作可以通過使用calc和min-height來實現。同時，footer也應該被拿出來，以便于在內容滾動時能夠順利在頁面的底部定位。

總之，通過使用高度自適應的方式來適配不同尺寸的手機屏幕，可以讓網站在手機上的顯示效果得到提升。用戶可以獲取到舒適且符合期望的用戶體驗。如果你的網站還沒做過適配，現在就必須要著手開始了！