CSS是前端開發過程中必不可少的一部分，但是在不同的瀏覽器中，對于一些樣式屬性的解析是存在差異的。在網頁高度自適應方面，也需要考慮到瀏覽器兼容性的問題。

在實現高度自適應時，我們經常會用到height:100%；這個屬性值，在你當前網頁所在的瀏覽器視窗最大值的基礎上，其子元素的高度就可以設置為100%。但是這種方法在一些早期的瀏覽器中存在兼容問題。

除此之外，利用瀏覽器的盒子計算屬性box-sizing（盒子模型屬性）也可以達到高度自適應的效果，代碼如下：

*{
box-sizing:border-box;
}
body{
height:100%;
margin:0;
padding:0;
}
.wrapper{
min-height:100%;
margin-bottom:-50px;/*剛好補上下面最后的50px，避免出現滾動條*/
}
.footer,
.push{
height:50px;
clear:both;
}

這段代碼中，我們首先利用星號選擇器設置整個網頁中的元素盒子計算屬性為border-box。接著，設置body元素的height:100%使得body元素的高度與瀏覽器窗口一致，同時對body元素的margin和padding設為0。在最外層的wrapper元素中，利用min-height:100%保證整個wrapper元素的高度占滿了body元素的全部高度（如果沒有這一屬性，wrapper元素的高度默認是由其內部元素的高度決定，如果內部元素高度不足以占滿body元素的高度，就會出現無法自適應的情況）。考慮到footer元素的高度會影響wrapper元素的高度，我們需要把wrapper元素中最后一個元素的下外邊距（margin-bottom）設為負的footer元素的高度，以避免出現滾動條的情況。最后，設置footer元素和占位元素push的高度為50px，利用clear:both屬性來讓這些元素脫離上下元素的文本流，避免布局出現錯亂。

通過以上代碼，我們不僅可以輕松實現高度的自適應，還可以避免兼容性問題帶來的困擾。