高度百分百CSS是一種能夠自適應不同分辨率顯示器的CSS技術。其基本原理是使用百分比單位讓頁面元素的高度隨著瀏覽器視窗的高度變化而自適應調整,從而實現(xiàn)頁面自適應而不出現(xiàn)滾動條的效果。
下面是實現(xiàn)高度百分百CSS的基本代碼:
html, body { height: 100%; /* 設置根元素和body元素的高度為100% */ } .container { min-height: 100%; /* 設置容器元素的最小高度為100% */ height: auto !important; /* 使用!important關鍵字防止樣式被覆蓋 */ height: 100%; /* 設置容器元素的高度為100% */ margin-bottom: -50px; /* 使用負外邊距消除頁腳高度 */ } .footer { height: 50px; /* 設置頁腳元素的高度 */ }
上述代碼中,我們首先設置了根元素和body元素的高度為100%。然后,我們使用min-height屬性設置了容器元素的最小高度為100%。接著,我們對容器元素的高度進行先后兩次設置,其中第一次使用了!important關鍵字來防止樣式被覆蓋,第二次則是為了適配某些不支持!important關鍵字的瀏覽器。最后,我們使用負外邊距將頁腳高度消除,從而使得容器元素的高度在不出現(xiàn)滾動條的情況下自適應調整。最后,我們設置了頁腳元素的高度,從而確保頁面不因自適應調整而出現(xiàn)頁面元素重疊等問題。