小程序自适应屏幕高度

/* 使用视口单位 */
html, body {
  height: 100vh;
}

/* 使用百分比 */
.container {
  height: 80%;
}

// 获取屏幕高度并设置元素高度
Page({
  onLoad: function () {
    const systemInfo = wx.getSystemInfoSync();
    const windowHeight = systemInfo.windowHeight;
    this.setData({
      containerHeight: windowHeight * 0.8
    });
  }
});

/* 在WXML中引用动态高度 */
<view class="container" style="height: {{containerHeight}}px;">
  <!-- 内容 -->
</view>

/* 确保滚动容器高度正确 */
.scroll-container {
  height: calc(100vh - 100px); /* 减去顶部导航栏等固定高度 */
  overflow-y: auto;
}

<!-- index.wxml -->
<view class="container" style="height: {{containerHeight}}px;">
  <scroll-view class="scroll-container">
    <!-- 内容 -->
  </scroll-view>
</view>

/* index.wxss */
.container {
  width: 100%;
}

.scroll-container {
  width: 100%;
}

// index.js
Page({
  data: {
    containerHeight: 0
  },
  onLoad: function () {
    const systemInfo = wx.getSystemInfoSync();
    const windowHeight = systemInfo.windowHeight;
    this.setData({
      containerHeight: windowHeight * 0.8
    });
  }
});