如何创建一个具有固定页眉和页脚的GWT布局，允许滚动窗格中心自动调整大小？

Question

我有一个设计，我正在努力转换为GWT布局。

基本上我需要一个页眉和页脚，它具有固定的像素高度和完整的浏览器宽度，这个障碍是它们必须始终对用户可见。

我一直在使用DockLayoutPanel和南北面板，然后在中心添加一个滚动面板，当我使用Unit.PCT时这很好用，但我需要修复南北面板以便它们是始终以像素为单位设置高度，但仍允许中心滚动面板自动填充两者之间的间隙。

一张图片胜过千言万语，所以我迅速起草了这个：

draft design

如果您有任何想法可以解决这个问题，我将非常感谢您的来信！

Answer 1

final DockLayoutPanel dPanel = new DockLayoutPanel(Unit.PX);

dPanel.addNorth(new FlowPanel(), 48);
dPanel.addSouth(new FlowPanel(), 48);

final Panel centerPanel = new FlowPanel();

for (int i = 0; i < 100; i ++)
  centerPanel.add(new Label("Lorem ipsum"));

dPanel.add(new ScrollPanel(centerPanel));

RootLayoutPanel.get().add(dPanel);

Answer 2

也许这有点偏离主题，但是，我建议您使用它，如果它仍然不是太晚，如果你有选择设计的自由： http://gwtbootstrap.github.com/ Twitter Bootstrap看起来不错，而且易于使用，gwt-bootstrap的好心人已经将它移植到GWT中，你可以像使用标准GWT组件一样使用它。这件事确实简化了我们的设计/布局问题。