如何使用 CSS Viewport 单位 vh 和 vw 来实现适应不同屏幕高度布局

在响应式网页开发过程中，不同设备的屏幕高度存在明显差异，比如手机竖屏、平板横屏、桌面显示器的高度各不相同，传统的固定像素或者百分比布局很容易出现内容溢出、底部留白过多等问题。CSS Viewport 单位 vh 和 vw 是基于视口尺寸的相对单位，能够直接关联当前设备的可视区域大小，是解决不同屏幕高度布局适配问题的有效方案。

vh 和 vw 基础概念

vh 和 vw 是 CSS3 引入的视口相对单位，计算规则非常简单：

• vh：1vh 等于当前视口高度的 1%，比如视口高度是 1000px，那么 1vh 就是 10px，100vh 就是整个视口的高度。
• vw：1vw 等于当前视口宽度的 1%，和 vh 的逻辑一致，只是参考的是视口宽度。

这两个单位不需要依赖父元素的尺寸，直接基于浏览器的可视区域计算，非常适合做跨设备的自适应布局。

使用 vh 适配不同屏幕高度的常见场景

1. 实现全屏区块布局

如果需要让某个区块占满整个屏幕的高度，不需要复杂计算，直接使用 100vh 即可，不管设备屏幕高度是多少，都会自动适配。

/* 全屏头部区块 */
.full-screen-header {
    height: 100vh;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

对应的 HTML 结构如下：

<div class="full-screen-header">
    <h1>全屏展示的内容</h1>
</div>

2. 按比例分配屏幕高度

如果需要多个区块按固定比例占用屏幕高度，比如顶部导航占 10% 屏幕高度，内容区占 90%，可以直接用对应的 vh 数值实现。

/* 顶部导航 */
.top-nav {
    height: 10vh;
    background-color: #333;
    color: white;
}
/* 内容区域 */
.main-content {
    height: 90vh;
    padding: 20px;
    overflow-y: auto;
}

3. 动态调整元素高度适配不同屏幕

如果需要在不同屏幕高度下，让某个元素的高度随屏幕变化自动调整，比如卡片高度在小屏幕占 60vh，大屏幕占 40vh，可以结合媒体查询使用。

/* 默认卡片高度 */
.card {
    height: 60vh;
    border: 1px solid #ddd;
    border-radius: 8px;
}
/* 屏幕高度大于800px时调整高度 */
@media screen and (min-height: 800px) {
    .card {
        height: 40vh;
    }
}

使用 vh 和 vw 的注意事项

• 移动端浏览器存在地址栏、工具栏动态显示隐藏的问题，会导致 100vh 计算出现偏差，部分浏览器会包含工具栏高度，实际显示内容会被遮挡。可以通过 CSS 自定义属性结合 JS 动态计算实际可视高度解决，或者优先使用 dvh（动态视口高度）单位，不过需要注意兼容性。
• 不要过度使用 vh 设置所有元素高度，否则在屏幕特别小或者特别大的设备上，内容可能会出现挤压或者过于分散的问题，建议和 min-height、max-height 结合使用。
• vw 和 vh 可以混合使用，比如设置宽度为 80vw，高度为 50vh，实现同时适配宽度和高度的布局效果。

简单综合示例

下面是一个同时适配屏幕高度和宽度的登录框布局示例，登录框宽度占视口宽度的 30%，高度占视口高度的 60%，居中显示：

.login-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f2f5;
}
.login-box {
    width: 30vw;
    height: 60vh;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 20px;
}

<div class="login-container">
    <div class="login-box">
        <h2>用户登录</h2>
        <form>
            <label>用户名：</label>
            <input type="text" placeholder="请输入用户名">
            <label>密码：</label>
            <input type="password" placeholder="请输入密码">
            <button type="submit">登录</button>
        </form>
    </div>
</div>

CSS_Viewport单位vhvw响应式布局屏幕高度适配修改时间：2026-06-28 10:00:28