Проблемы макета GWT

Question

У меня есть такая структура Layout: 1) Сначала закладывает SimpleLayoutPanel main (зеленая рамка) 2) Я хочу добавить DockLayoutPanel child к основному (красная граница; поля 25px)

Я реализовал это, но результат, показанный во вложении (.jpg), для меня странен. Таким образом, все красные (верхняя, левая, правая, нижняя) границы child должны быть внутри main , но child смещение панели.Как я могу правильно реализовать эту логику?У меня есть более сложная структура пользовательского интерфейса с 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 для границы!

Позвольте мне объяснить это на примере.

Ваша панель DockLayout имеет размер 500x500 пикселей. Вы помещаете в него дочерний элемент со 100х100%, где поля, отступы и границы равны 0 пикселей. Ваш элемент будет иметь размер 500x500px. Нет, вы даете ему границу 3px. Это означает, что к высоте и ширине добавляется 3 пикселя. Таким образом, ваш элемент имеет размер 506x506px. Переполнение игнорируется.

Результат - ваша вторая фотография.

Это правильное поведение HTML и не имеет ничего общего с GWT!

Answer 2

Я решил проблему, удалив 100% высоты и ширины .moduleBody CSS. Поэтому, чтобы избежать такой ситуации, вы не должны определять размер дочернего элемента на 100% по высоте и ширине. Спасибо, ребята!