在CSS中，設置頁面高度是非常重要的，特別是當我們想要使頁面看起來更加整潔和專業時。通過CSS，我們可以設置頁面的高度和寬度以及頁面中包含的文本的樣式和排版。

在下面的代碼中，我們將使用pre標簽來顯示CSS代碼樣例：

body {
height: 100%; /*設置整個頁面的高度*/
width: 100%; /*設置整個頁面的寬度*/
margin: 0; /*去除頁面默認的外邊距*/
padding: 0; /*去除頁面默認的內邊距*/
font-size: 16px; /*設置頁面字體大小*/
font-family: Arial, sans-serif; /*設置頁面字體樣式*/
}
.header {
height: 100px; /*設置頁頭高度*/
background-color: #333; /*設置頁頭顏色*/
color: #fff; /*設置頁頭文字顏色*/
text-align: center; /*設置頁頭文字居中對齊*/
line-height: 100px; /*設置行高為頁頭高度，使文字垂直居中*/
}
.content {
min-height: calc(100% - 100px); /*計算出未被頁頭占據的高度*/
padding: 20px; /*設置內容區域內邊距*/
font-size: 14px; /*設置內容區域字體大小*/
font-weight: bold; /*設置內容區域字體粗細*/
line-height: 1.5; /*設置內容區域行高*/
}
.footer {
height: 50px; /*設置頁腳高度*/
background-color: #333; /*設置頁腳顏色*/
color: #fff; /*設置頁腳文字顏色*/
text-align: center; /*設置頁腳文字居中對齊*/
line-height: 50px; /*設置行高為頁腳高度，使文字垂直居中*/
}

在上面的代碼中，我們定義了一個body選擇器來設置整個頁面的高度和寬度。接著，我們使用.header選擇器來設置頁頭的高度和樣式，例如背景顏色、文字顏色和居中對齊等。同樣地，我們使用.content選擇器來設置內容區域的高度和樣式，例如內邊距、字體大小和粗細、以及行高。最后，我們使用.footer選擇器來設置頁腳的高度和樣式，例如背景顏色、文字顏色和居中對齊等。

總結來說，通過使用CSS，我們可以輕松地設置頁面的高度和樣式，使頁面看起來更加整潔和專業。希望本文能對你有所幫助！