在下面的代码中，大家将使用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，大家可以轻松地设置页面的高度和样式，使页面看起来更加整洁和专业。希望本文能对你有所帮助！