微信小程序怎么做自适应屏幕高度？

封面图 • 2025-11-22 • 小程序

在微信小程序中实现**自适应屏幕高度**，通常需要结合 **CSS 的 `height` 属性** 和 **WXML 中的布局方式**。下面是一些常见的方法和技巧：

---

## ✅ 一、使用 `vh` 单位

`vh` 是视口单位（viewport height），1vh = 视口高度的 1%。

### 示例：
```css
.container {
  height: 100vh; /* 占满整个屏幕高度 */
}
```

> 注意：在某些情况下（如页面有导航栏或状态栏），`100vh` 可能会超出实际可视区域，可以使用 `calc(100vh - 44px)` 来调整。

---

## ✅ 二、使用 `flex` 布局

将页面容器设置为 `flex` 布局，并让子元素自动填充剩余空间。

### WXML：
```html
<view class="container">
  <view class="header">头部</view>
  <view class="content">内容区域</view>
</view>
```

### WXSS：
```css
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  height: 60px;
  background-color: #f0f0f0;
}

.content {
  flex: 1; /* 自动填充剩余空间 */
  overflow-y: auto; /* 如果内容过多，可以滚动 */
}
```

---

## ✅ 三、使用 `scroll-view` 实现可滚动内容区域

如果你的内容较多，希望在固定高度内滚动，可以使用 `scroll-view` 组件。

### WXML：
```html
<scroll-view scroll-y style="height: 100vh;">
  
</scroll-view>
```

或者结合 `flex` 布局：

```html
<view class="container" style="height: 100vh;">
  <view class="header">头部</view>
  <scroll-view scroll-y style="flex: 1;">
    
  </scroll-view>
</view>
```

---

## ✅ 四、动态计算高度（JavaScript）

如果需要根据设备信息动态调整高度，可以用 `wx.getSystemInfoSync()` 获取系统信息。

### JS 示例：
```javascript
const systemInfo = wx.getSystemInfoSync();
const windowHeight = systemInfo.windowHeight;

Page({
  data: {
    containerHeight: windowHeight
  }
});
```

### WXML：
```html
<view style="height: {{containerHeight}}px;">内容</view>
```

---

## ✅ 五、注意点

- 微信小程序默认不支持 `100%` 高度，除非父级容器也设置了 `height: 100%`。
- 使用 `flex` 布局时，确保所有父级容器都设置为 `flex` 或 `flex-direction: column`。
- 在真机测试时，注意状态栏和导航栏的高度影响。

---

## 📌 总结

| 方法 | 适用场景 | 优点 |
|------|----------|------|
| `vh` | 简单全屏 | 快速实现 |
| `flex` | 多层布局 | 灵活控制各部分高度 |
| `scroll-view` | 滚动内容 | 支持滚动 |
| JS 动态计算 | 需要精确控制 | 精准适配 |

---

如果你有具体的页面结构或问题，欢迎提供代码片段，我可以帮你更具体地优化！