UI5技术问题：如何让ScrollContainer填充剩余高度

我太懂你这种头疼的情况了！UI5里的布局高度适配真的很容易踩坑，尤其是涉及到ScrollContainer要占满剩余空间的场景，稍不注意就会出现双重滚动条的问题。

先给你分析下你当前代码的问题：你给ScrollContainer设100%高度后，它会继承父容器VBox的高度，但VBox本身如果没有被正确约束，会跟着里面的List一起被撑大，结果就是外层Panel也出现了滚动条，和ScrollContainer的滚动条重叠了。

下面给你一套亲测有效的解决方案，分步骤来：

核心思路 #

利用UI5的弹性布局（VBox的flex特性）来分配空间，让ScrollContainer自动占据VBox里除了底部固定Panel之外的所有剩余高度，而不是硬设100%高度。

具体修改步骤 #

1. 给ScrollContainer添加弹性布局配置
   在XML里给ScrollContainer加上layoutData，让它在VBox里自动占满剩余空间：

<ScrollContainer vertical="true" horizontal="false">
  <layoutData>
    <sap.m.VBoxLayoutData flexGrow="1"/>
  </layoutData>
  <List>
    <!-- 你的List内容 -->
  </List>
</ScrollContainer>

flexGrow="1"的意思是，VBox里所有没设flexGrow的控件（比如底部的Panel）会先占据自己需要的高度，剩下的空间全部分配给这个ScrollContainer。

2. 确保上层容器的高度约束正确

• 最外层的Panel要设置height="100%"，如果它的父容器是Page，记得给Page加上enableScrolling="false"，避免Page自带的滚动和ScrollContainer冲突。
• 保留VBox的fitContainer="true"，这个属性能让VBox占满父容器（也就是外层Panel的content区域）的高度。

3. 调整List的配置
   List不要设置固定高度，让它自然生长，当内容超过ScrollContainer的高度时，ScrollContainer会自动触发垂直滚动，不会撑大父容器。

修改后的完整代码示例 #

<Panel height="100%">
  <headerToolbar>
    <!-- 你的自定义Toolbar -->
  </headerToolbar>
  <content>
    <VBox fitContainer="true">
      <ScrollContainer vertical="true" horizontal="false">
        <layoutData>
          <sap.m.VBoxLayoutData flexGrow="1"/>
        </layoutData>
        <List growing="true">
          <!-- 你的List内容 -->
        </List>
      </ScrollContainer>
      <Panel>
        <!-- 你的固定高度输入Panel -->
      </Panel>
    </VBox>
  </content>
</Panel>

额外注意点 #

• 如果你的Page里还有其他控件，要确保Page的enableScrolling设为false，不然Page的滚动条会和ScrollContainer的滚动条同时出现。
• 不要给ScrollContainer设置height="100%"，否则它会直接继承VBox的全高，忽略底部Panel的空间，导致ScrollContainer被底部Panel覆盖或者出现双重滚动。

备注：内容来源于stack exchange，提问作者Lukas Bauer