页面底部出现莫名的空白

[349989153]

相关平台

H5

复现仓库

无
浏览器版本: Chrome 102
使用框架: React

复现步骤

想做一个header部分固定，中间内容滚动的页面，页面总共2个子元素：一个固定高度header，一个flex：1的scrollView

页面样式：

{
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

scrollView样式

{
    flex: 1;
    overflow: scroll;
  }

期望结果

一个高度100vh，header固定，内容滚动的页面

实际结果

页面底部出现空白，且检查元素，无法定位此空白的来源（body元素都在这空白之上）

环境信息

  Taro CLI 3.0.8 environment info:
    System:
      OS: macOS 12.4
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 12.20.0 - /usr/local/bin/node
      Yarn: 1.13.0 - /usr/local/bin/yarn
      npm: 6.14.8 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.0.8 => 3.0.8 
      @tarojs/mini-runner: 3.0.8 => 3.0.8 
      @tarojs/react: 3.0.8 => 3.0.8 
      @tarojs/runtime: 3.0.8 => 3.0.8 
      @tarojs/taro: 3.0.8 => 3.0.8 
      @tarojs/webpack-runner: 3.0.8 => 3.0.8 
      babel-preset-taro: 3.0.8 => 3.0.8 
      eslint-config-taro: 3.0.8 => 3.0.8 
      react: ^16.10.0 => 16.13.1 
      taro-ui: ^3.0.0-alpha.3 => 3.0.0-alpha.3 

[349989153]

即使是body元素，也在底部这空白之上，无法理解，找不到这段空白的来源

[349989153]

html和body的高度已经是100vh了，可是100vh之下还有一段空白

[ZakaryCode]

这并非是个问题，html、body 都不是页面，可以检查页面节点具体的大小

[349989153]

css加上：
.taro-tabbar__panel {
overflow: hidden!important;
}

空白就消失了

[666-arch]

page才是最顶层吧 你设置100%

[TheKonka]

多说一句，100vh会有问题
https://mp.weixin.qq.com/s/unU_WsMn7AtEuFqB7rKaJA