1. 引言
在网页设计中，页面高度是一个重要的元素，它直接影响到用户的阅读体验和页面布局。HTML5和CSS3提供了多种方法来获取和调整页面高度，无论是全屏显示还是固定高度，都能满足不同的设计需求。本文将详细介绍如何使用HTML5和CSS3来获取与调整页面高度。
2. 获取页面高度
要获取页面高度，我们可以使用JavaScript或者CSS中的相关属性。
2.1 使用JavaScript获取页面高度
JavaScript可以通过
document.documentElement.clientHeight
或
document.body.clientHeight
来获取可视区域的高度。
var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
console.log(“可视区域高度: ” + windowHeight + “px”);
2.2 使用CSS获取页面高度
CSS中，我们可以通过
height
属性来设置或获取元素的高度。
/* 设置元素高度 */
.div {
height: 500px;
}

/* 获取元素高度 */
.div {
height: var(–height);
}
3. 调整页面高度
调整页面高度可以通过以下几种方法实现：
3.1 使用视口（Viewport）
视口是用户看到页面内容的区域。通过设置
meta
标签中的
viewport
属性，可以控制页面在移动设备上的显示。

3.2 使用CSS媒体查询
CSS媒体查询可以根据不同的屏幕尺寸应用不同的样式，从而实现响应式设计。
@media (max-width: 600px) {
body {
height: 100vh;
}
}
3.3 使用Flexbox布局
Flexbox布局是一种强大的布局模型，可以轻松实现元素的对齐、分布和顺序控制。
.container {
display: flex;
height: 100vh;
}

.item {
flex: 1;
}
3.4 使用CSS的
vh
单位
vh
（视口高度单位）是一个相对单位，其高度是视口高度的1%。使用
vh
单位可以方便地设置元素的高度。
.div {
height: 50vh;
}
4. 示例项目
以下是一个简单的示例，演示如何使用HTML5和CSS3来创建一个全屏的背景图片，并使用Flexbox布局来使内容居中。

5. 总结
通过本文的介绍，相信你已经掌握了使用HTML5和CSS3来获取与调整页面高度的方法。在实际开发中，我们可以根据具体需求选择合适的方法来实现页面高度的控制，从而提升用户体验。