GWT布局问题

Question

我有这样的布局结构： 1）首先放置SimpleLayoutPanel main （绿色边框） 2）我想将DockLayoutPanel child 添加到main（红色边框; 25px边距）

我已经实现了这一点，但附件（.jpg）中显示的结果对我来说很奇怪。 因此，子的所有红色（顶部，左侧，右侧，底部）边框应位于主内，但子面板会移位。如何以正确的方式实现此逻辑？我有更复杂的ui结构3-4级。而且我也没有利润。

这里是代码和css：

SimpleLayoutPanel panel = new SimpleLayoutPanel();
panel.setStyleName("mainModulePanel");
SimpleLayoutPanel p = new SimpleLayoutPanel();
p.setStyleName("moduleBody");
panel.setWidget(p);
initWidget(panel);

//CSS    
.moduleBody {
/*width: 100%;
  height: 100%;*/
  margin:  0px;
  width: 100%;
  height: 100%;
  border: 3px solid red;
}

.mainModulePanel {
/*margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 5px;*/
  border: 3px solid green;
}

Answer 1

这与边框的html定义有关！

让我用一个例子解释一下。

您的DockLayoutPanel是500x500px。你将一个100x100％的子元素放入其中，其中边距，填充和边框为0px。您的元素大小为500x500px。不，你给它3px的边框。这意味着增加3px的高度和宽度。所以你的元素大小为506x506px。 溢出被忽略。

结果是你的第二张照片。

这是正确的html行为，与GWT无关！

Answer 2

我通过删除100％高度和宽度来解决问题.moduleBody CSS。 因此，为了避免这种情况，你不应该以100％的高度和宽度来调整子元素的大小。 谢谢你们！