css - 如何使 ScrollPanel 仅在其内部小部件高于它时才可见，而当其内部小部件短于它时不可见？

Question

好的，假设我有一个 height="500px" 的 ScrollPanel。该 ScrollPanel 中有一个 HTMLPanel。

有时，HTMLPanel 有更多内容，因此它会高于“500px”，例如：700px。另一次，HTMLPanel 的内容较少，因此它会比“500px”短，例如：300px。

当 HTMLPanel 高于 500px 时，会出现一个滚动条。这是有道理的。没有任何问题。

但是，问题是当 HTMLPanel 短于 500px（例如 300px）时，没有出现滚动条，但 ScrollPanel 仍然显示 500px 的高度。所以有 200px 的高度间隙未使用，这是浪费空间和不可接受的。

请看这张照片

那么，如何使 ScrollPanel 仅在其内部小部件高于它时才可见，而当其内部小部件短于它时不可见？

我们可以通过 Css 或编码来修复它吗？

Answer 1

是的，你可以这么做。您可以为 ScrollPanel 指定最大高度。

ScrollPanel p = new ScrollPanel();
p.getElement().getStyle().setProperty( "maxHeight", "500px" );

因此，当您的 HTML 面板为 300px 时，滚动面板的高度将为 300px。当 HTML 面板高度 > 500px 时，ScrollPanel 将显示滚动条

另一种方式 ：

假设您在 ScrollPanel 中添加了一个名为 .scp 的类，那么 css 将是

.scp
{
  max-height: 500px
}

然后将该类添加到您的滚动面板

ScrollPanel p = new ScrollPanel();
p.addStyleName( "scp" );