如何使用相对大小的ScrollPanel
我正在尝试在页面中使用GWT的ScrollPanel。 由于大多数内容都在ScrollPanel中，因此我希望它采用尽可能大的页面部分，并在页面resize时resize。 当然我想要设置它的相对大小，即setSize（“100％”，“100％”）。 然而，文件说它只能设置绝对CSS单位的大小（例如“10px”，“1em”，但不是“50％”）
我无法理解为什么ScrollPanel无法在GWT中获取相对大小。 经过多次搜索和阅读后，有人建议将元素的大小设置为“100％”（参见GWT相对宽度 ）。 我可以尝试但不确定它是否会影响ScrollPanel的其他function – 因为我还将控制面板的滚动。
ScrollPanel myScrollPanel = new ScrollPanel(); myScrollPanel.setSize("2112px", "150px"); // Arbitrary width. myScrollPanel.getElement().getStyle().setProperty("width", "100%"); 所以这是我的问题：
（1）为什么??? （这让我很生气，因为我无法理解，也许有更深入了解GWT内部机制的人可以启发我）
（2）如何解决？
ScrollPanel实现了RequiresResize接口，这意味着它需要从其父级获取大小，或者必须显式设置其大小。 因此，您有两种选择。
（1）使用实现ProvideResize接口的父窗口小部件 – 例如，LayoutPanel。 但是，重要的是，从RootPanel到ScrollPanel，ProvideResize – RequiresResize链保持不间断。
在典型的实现中，LayoutPanel（或其变体）代表整个页面。 然后您可以添加各种子项，例如“标题”，“主视图”，“左侧菜单”等。对于每个孩子，您可以设置首选大小。 例如：
myLayoutPanel.setWidgetTopBottom(myScrollPanel, 32, Unit.PX, 0, Unit.PX);
在此示例中，您的ScrollPanel将占用页面上的所有可用空间，从顶部的32px开始，一直到底部。 您可以将其位置设置为百分比或其他单位。
（2）您可以使用纯CSS完成相同的布局。 如果您不关心非常旧的浏览器，最好的选择是使用flexbox布局模型 。 在这种情况下，您在父窗口小部件上设置display: flex ，在ScrollPanel上设置flex-grow: 1 – 告诉它占用所有可用空间（除非有其他flex-grow兄弟，在这种情况下，它们将分割额外的空间） 。
第一个问题的答案非常简单。 使用元素的相对大小时，您指的是父元素的大小。 因此，当您设置height: 100% ，表示您的元素应该是其父元素的100％大小。
有一些方法可以得到你想要的东西：
-
使用视口百分比长度 – 您可以设置
height: 100vh，这意味着100% of the viewport height– 这是最简单的方法，但可能尚未被所有浏览器支持 -
将
html和body元素设置为100％高度 – 这将允许您使用子元素的相对高度 -
使用GWT DockLayoutPanel或DockPanel并将滚动面板添加到
center窗格 – 它将占用所有剩余空间
首先，ScrollPanel不是其他小部件，因为我不知道为什么。 无法设置相对大小（50％），如果我给它一些风格，它会丢失在某处，无法从页面中找到。
我的解决方案是使用ResizeLayoutPanel。 Andrei建议使用ProvideResize，但要求提供/要求resize链保持不间断，这可能非常棘手。 我发现这个ResizeLayoutPanel“ProvideResize到它的一个子节点，但不是RequiresResize”，这是我复合的根面板的完美候选者。 然后，我只是扩展ScrollPanel以在“onResize”方法中调整自身大小，只要它由父ResizeLayoutPanel调用。
仍然没有回答我的第一个问题：ScrollPanel首先表现得像这样吗？ 我试图在源代码中找到答案，但没有成功（尽管我没有花足够的时间研究源代码）。
public class My100PctScrollPanel extends ScrollPanel { @Override public void onResize() { // Window.alert("on resize"); this.setWidth(this.getParent().getOffsetWidth()+"px"); this.setHeight(this.getParent().getOffsetHeight()+"px"); super.onResize(); } } ........ compositeRoot = new ResizeLayoutPanel(); ........ scrollPanel = new My100PctScrollPanel(); compositeRoot.clear(); compositeRoot.add(scrollPanel);