網站底部留白問題在開發中很常見，主要原因是瀏覽器默認會給頁面加上一些外邊距。當我們的內容長度不足以占滿整個頁面時，就會出現底部留白的情況。讓網頁看上去不太美觀。那么該怎么解決呢？這一篇文章將介紹一種使用 CSS 清除網站底部留白的方法。

html,body{
height: 100%;
margin: 0;
padding: 0;
}
.wrapper{
min-height: 100%;
margin-bottom: -50px;
}
.footer{
height: 50px;
background-color: #ccc;
}

以上代碼清除底部留白的方式主要通過兩個關鍵屬性：min-height 和 margin-bottom，它們的作用分別是設置 wrapper 的高度為最小值 100%，和給 wrapper 設置負的 margin-bottom 以抵消瀏覽器默認的底部外邊距。其中，wrapper 包含了頁面的主體部分，footer 則代表頁面的底部。

可以看到，這樣的方式在沒有太多內容時，footer 會始終位于頁面底部，看上去非常舒適。當頁面內容變多時，wrapper 會自適應高度，同時 margin-bottom 也會跟著變小，保證內容出現滾動條時，footer 仍然在底部。這是一種簡單而優雅的解決方案。

總之，網站底部留白會影響頁面美觀和用戶體驗，但我們可以通過 CSS 來解決這個問題，增強網站的可讀性和可用性，讓訪問者享受更好的使用體驗！