Java 像普通网页一样的整版GWT布局

我正在尝试使用GWT制作这样的布局。这真让我恼火，因为它看起来不像我想要的那样。总有一些东西重叠，隐藏，大或只是在一个错误的位置

我只想做这样的布局：

我为此工作了几个小时，但没有结果：(

布局应该填满整个浏览器，但没有滚动条！ 标题应包含图像和标签 菜单是gwt中的菜单对象，内容正在更改，具体取决于单击的列表项

---

请帮忙……

根据个人经验，根据谷歌自己的建议，我建议调查一下

---

另外，我建议插入一些“溢出缓冲区”在您的面板之间。也就是说，您为最北端的面板分配了100px。将其大小缩小到96，在它和下一个面板之间留出+/-2px的空间。这将允许不同计算机和浏览器之间的任何大小/布局错误得到一定程度的补偿-成本很低。

使用UiBinder，您可以使用两个嵌套d DockLayoutPanel来实现这个布局。我自己还没有测试过，但是类似的东西应该可以工作（将DockLayoutPanel添加到RootLayoutPanel中 )

把标签和图片放在这里
菜单
主体

我刚刚测试了以下解决方案，它的外观和工作原理与您描述的完全相同。我使用了uiBinder，但不是必须使用它。ui xml代码是：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
    .important {
        font-weight: bold;
    }
    .header_bar{
        position:absolute;
        top:0px;
        left:0px;
        height: 100px;
        right:0px;
        background-color: red;
    }

    .left_bar{
        position:absolute;
        top:100px;
        left:0px;
        bottom:0px;
        width: 130px;
        background-color: green;
    }

    .menu_bar{
        position:absolute;
        top:100px;
        left:130px;
        height: 30px;
        right:0px;
        background-color: yellow;
    }
    .content{
        position:absolute;
        top:130px;
        left:130px;
        right: 0px;
        bottom: 0px;
    }
</ui:style>
<g:HTMLPanel>
<div class="{style.header_bar}">
    <g:FlowPanel ui:field="headerPanel"></g:FlowPanel> 
</div>
<div class="{style.left_bar}">
    <g:FlowPanel ui:field="leftPanel"></g:FlowPanel>
</div>
<div class="{style.menu_bar}">
    <g:FlowPanel ui:field="menuPanel"></g:FlowPanel>
</div>
<div class="{style.content}">
    <g:FlowPanel ui:field="contentPanel"></g:FlowPanel>
</div>
</g:HTMLPanel>

.重要{
字体大小：粗体；
}
.标题栏{
位置：绝对位置；
顶部：0px；
左：0px；
高度：100px；
右：0px；
背景色：红色；
}
.左{
位置：绝对位置；
顶部：100px；
左：0px；
底部：0px；
宽度：130px；
背景颜色：绿色；
}
.菜单栏{
位置：绝对位置；
顶部：100px；
左：130像素；
高度：30px；
右：0px；
背景颜色：黄色；
}
.内容{
位置：绝对位置；
顶部：130像素；
左：130像素；
右：0px；
底部：0px；
}

java文件代码是：

public class TestLayout extends Composite {

private static TestLayoutUiBinder uiBinder = GWT
        .create(TestLayoutUiBinder.class);

interface TestLayoutUiBinder extends UiBinder<Widget, TestLayout> {
}

public TestLayout() {
    initWidget(uiBinder.createAndBindUi(this));
    headerPanel.add(new Label("Head!"));
    leftPanel.add(new Label("Left!"));
    menuPanel.add(new Label("Menu!"));
    contentPanel.add(new Label("Content!"));
}

@UiField
FlowPanel headerPanel;

@UiField
FlowPanel leftPanel;

@UiField
FlowPanel menuPanel;

@UiField
FlowPanel contentPanel;
}

公共类TestLayout扩展了复合{
专用静态TestLayoutUiBinder uiBinder=GWT
.create（TestLayoutUiBinder.class）；
接口TestLayoutUiBinder扩展了UiBinder{
}
公共测试布局（）{
initWidget（uiBinder.createAndBindUi（this））；
添加（新标签（“Head！”）；
添加（新标签（“左！”）；
添加（新标签（“菜单”）；
添加（新标签（“内容！”）；
}
@尤菲尔德
FlowPanel头部面板；
@尤菲尔德
流程面板左面板；
@尤菲尔德
流程板菜单面板；
@尤菲尔德
FlowPanel内容面板；
}

---

我希望我能帮上忙。

请公布您目前的情况，并准确地告诉我们哪些方面没有按计划进行。

public class TestLayout extends Composite {

private static TestLayoutUiBinder uiBinder = GWT
        .create(TestLayoutUiBinder.class);

interface TestLayoutUiBinder extends UiBinder<Widget, TestLayout> {
}

public TestLayout() {
    initWidget(uiBinder.createAndBindUi(this));
    headerPanel.add(new Label("Head!"));
    leftPanel.add(new Label("Left!"));
    menuPanel.add(new Label("Menu!"));
    contentPanel.add(new Label("Content!"));
}

@UiField
FlowPanel headerPanel;

@UiField
FlowPanel leftPanel;

@UiField
FlowPanel menuPanel;

@UiField
FlowPanel contentPanel;
}