uniapp中height 100%和100vh的区别是什么？

在 UniApp 中，height: 100% 和 height: 100vh 的区别主要在于参考基准不同，具体如下：

1. height: 100%

• 参考基准：基于父元素的高度。如果父元素没有明确设置高度，100% 可能无效，导致元素高度为 0 或内容撑开。
• 适用场景：适用于嵌套布局，需要继承父容器高度时。
• 示例代码：

  <template>
    <view class="parent">
      <view class="child">子元素高度为父元素的100%</view>
    </view>
  </template>
  <style>
  .parent {
    height: 500px; /* 父元素必须设置高度 */
  }
  .child {
    height: 100%; /* 继承父元素高度 */
  }
  </style>
  

2. height: 100vh

• 参考基准：基于视口（Viewport）高度，1vh 等于视口高度的 1%。100vh 始终等于整个屏幕可见区域的高度。
• 适用场景：全屏布局，如启动页、弹窗覆盖层等，不受父元素高度影响。
• 示例代码：

  <template>
    <view class="fullscreen">这个元素高度为整个视口高度</view>
  </template>
  <style>
  .fullscreen {
    height: 100vh; /* 直接使用视口高度 */
  }
  </style>
  

关键区别总结：

• 100%：依赖父元素高度，需确保父链有明确高度定义。
• 100vh：直接依赖设备视口，更稳定，适合全屏效果。

根据布局需求选择：嵌套结构用 100%，全屏用 100vh。注意在部分浏览器或环境中，100vh 可能包含地址栏高度，需测试适配。