移动端vaadin-grid遮挡vaadin-grid-pagination分页控件如何解决

核心问题排查（你的自定义CSS未生效的原因） #

你编写的样式代码存在两处明显错误：

• 选择器写法错误：:host()为空参数的伪类写法不会被浏览器识别，无参数时直接写:host即可
• 属性设置不符合预期：你调试得到的结论是移除scroller的position: relative属性，但你写的是将其设置为absolute，完全不符合需求
  修正后的样式代码如下：

:host #scroller {
  width: 100%;
  height: 100%;
  position: static !important;
}

如果需要避免影响全局所有vaadin-grid组件，可以添加主题限定：

/* 自定义样式文件 */
:host([theme~="fix-pagination-overlap"]) #scroller {
  width: 100%;
  height: 100%;
  position: static !important;
}

之后在对应的vaadin-grid实例上添加属性theme="fix-pagination-overlap"即可。 #

配置校验 #

确认你的@CssImport配置符合规则：Vaadin的@CssImport默认从项目frontend根目录寻址，请确认grid-styles.css文件放在frontend/styles/路径下，避免路径错误导致样式未注入。同时测试前清理浏览器缓存，避免旧样式缓存干扰。 #

更稳妥的替代方案（无需修改组件内部样式） #

直接调整外层容器布局，从根源避免遮挡问题，后续Vaadin版本升级也不会出现样式失效：

1. 给包裹vaadin-grid和vaadin-grid-pagination的父容器添加样式：

.grid-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 需固定在视口底部用100vh，适配父容器高度用100% */
}

2. 给vaadin-grid添加样式：

vaadin-grid {
  flex: 1 1 auto;
  overflow: auto;
}

3. 给vaadin-grid-pagination添加样式：

vaadin-grid-pagination {
  flex-shrink: 0;
}

内容的提问来源于stack exchange，提问作者Sergiu