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

Question

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

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

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

但是，问题是当 HTMLPanel 小于 500px(例如，300px)时，没有出现滚动条，但 ScrollPanel 仍然显示 500px 的高度。所以有 200px 的高度差距没有使用，这是一种空间浪费，也是 Not Acceptable 。

请看这张图

那么，如何让 ScrollPanel 只在其内部 widget 高于它时可见，而当其内部 widget 低于它时不可见？

我们可以通过 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" );