網頁占據整個屏幕的效果可以給用戶帶來更好的視覺體驗，讓網站更加美觀大氣。如何實現呢？下面介紹一下css代碼實現方法：

html, body{
height: 100%;
}
#container{
min-height: 100%;
position: relative;
}

上面的代碼是將html和body的高度都設置為100%，讓它們占據屏幕的整個高度。然后將容器#container的最小高度設置為100%，意味著即使內容不夠高，也會自動填充整個屏幕。同時，使用相對定位position: relative來保證其他元素在#container中定位是以該元素為相對參照的。

但是，有時候#container內的元素內容超出了屏幕高度，這時候需要用到滾動條來瀏覽整個內容，不然會影響用戶體驗。我們可通過以下代碼來實現：

body{
overflow: hidden; /*頁面內容過長，隱藏滾動條*/
}
#container{
min-height: 100%;
position: relative;
overflow: auto; /*當頁面內容過長時，在#container內顯示滾動條*/
}

當頁面內容過長時，頁面內會出現#container內單獨的滾動條，用戶可以通過滾動條來查看整個內容。