Vaadin 21 ApplicationLayout下视图滚动内容被顶部toggle遮挡问题咨询

AI 小北

2026-10-1

这个问题是Vaadin 21版本AppLayout的已知兼容性问题，在iOS移动端尤为常见，核心原因有两个：

iOS系统对100vh的计算规则和安卓/桌面端不同，会包含顶部系统状态栏高度，导致实际可用高度小于计算值
AppLayout默认没有禁用全局页面滚动，且内容区域的高度计算未自动扣除顶部navbar高度，导致内容溢出时整页滚动，内容被navbar遮挡

修复步骤

第一步：调整ApplicationLayout的基础配置
在ApplicationLayout的构造函数中新增高度和溢出控制逻辑，修改后代码如下：

public ApplicationLayout(ApplicationService applicationService) {
    this.applicationService = applicationService;

    createHeader();
    createDrawer();

    this.setPrimarySection(Section.DRAWER);
    // 新增配置开始
    this.setHeightFull();
    getElement().getStyle().set("overflow", "hidden");
    // 新增配置结束
}

第二步：新增全局CSS适配
在项目主题的样式文件（通常路径为frontend/themes/[你的主题名]/styles.css）中添加以下规则，解决iOS高度计算和内容区域滚动问题：

/* 禁用全局滚动 */
html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
}

/* 调整AppLayout内容区域高度，扣除navbar高度 */
vaadin-app-layout::part(content) {
  height: calc(100vh - var(--vaadin-app-layout-navbar-height));
  overflow: hidden;
}

/* 适配iOS特殊高度计算规则 */
@supports (-webkit-touch-callout: none) {
  vaadin-app-layout::part(content) {
    height: calc(-webkit-fill-available - var(--vaadin-app-layout-navbar-height));
  }
}

第三步：校验TestView配置
你当前的TestView配置已经符合要求：setSizeFull()声明了占满父容器，expand(grid)让Grid自适应剩余高度，Grid本身自带滚动逻辑，不需要额外套Scroller组件。修改完成后内容会在Grid区域内滚动，不会出现整页滚动被顶部navbar遮挡的问题。